こんにちは！セミマサです。
非常に評価の高いスライダープラグイン「Swiper.js」を使ってみました！3パターン制作したので備忘録としてそれぞれのポイントをまとめていきたいと思います。
デモサイト
下のボタンから今回のデモサイトへ行けます。
共通部分のCSS
.swiper-container {
width: 80%;
padding: 5vh 0;
}
.swiper-slide img {
width: 100%;
}3つあるデモスライダーの共通CSSです。
サンプル１
アクティブでないスライドを暗くしてみました。
HTML
<section id="first">
<h2 class="section-heading">サンプル1</h2>
<div class="swiper-container swiper1">
<div class="swiper-wrapper sample1">
<div class="swiper-slide"><a href="#"><img src="img/sample1.png" alt="Swiper01"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample2.png" alt="Swiper02"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample3.png" alt="Swiper03"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample4.png" alt="Swiper04"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample5.png" alt="Swiper05"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample6.png" alt="Swiper06"></a></div>
<div class="swiper-slide"><a href="#"><img src="img/sample7.png" alt="Swiper07"></a></div>
</div>
<div class="swiper-pagination pagination1"></div>
<div class="swiper-button-prev prev1"></div>
<div class="swiper-button-next next1"></div>
</div>
</section>１つ目のスライダーのHTMLです。
CSS
.prev1 {
left: 2%;
}
.next1 {
right: 2%;
}
.sample1>.swiper-slide {
filter: brightness(40%);
}
.sample1>.swiper-slide-active {
filter: brightness(100%);
}
.sample1>.swiper-slide-active:hover {
opacity: .7;
}１つ目のスライダーのCSSになります。ポイントは下記2点です！
- アクティブじゃないスライドはfilterプロパティのbrightness関数で明度を下げる
- アクティブなスライドのみ明度を元に戻す。
Script
var swiper1 = new Swiper('.swiper1', {
navigation: {
nextEl: '.next1',
prevEl: '.prev1',
},loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: true
},pagination: {
el: '.pagination1',
type: 'bullets',
},slidesPerView:2,spaceBetween:20,initialSlide:0,speed:500,centeredSlides:true,
breakpoints: {
768: {
spaceBetween: 10,
}
}
});1つ目のスライダーのスクリプト部分です。指定したオプションの内容について紹介します。
- navigation：アローボタンの紐付けをします。
- loop:trueにするとスライドがループするようになります。
- autoplay:自動再生に関するオプションです。今回の設定では5秒ごとにスライドが切り替わり、ユーザーが操作した場合自動再生が止まります。
- pagination:ページネーションの紐づけと見た目の設定をします。
- slidesPerView:同時に表示されるスライドの枚数を指定します。
- spaceBetween:スライド間の余白を指定します。
- initialSlide:最初に表示するスライドの番号です。
- speed:スライドの遷移時間です。デフォルト値は300で、これより大きいと遅くなり小さいと早くなります。
- centeredSlides:trueにするとアクティブなスライドが中央に来ます。
- breakpoints:ウィンドウサイズ毎にオプションの指定を変更できます。
サンプル２
スライダー内の画像をクリックするとボックスの内容が変わります。
HTML
<section id="second">
<h2 class="section-heading">サンプル2</h2>
<div class="content-window">
<p class="content-text">セミ君をクリックしてね！</p>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper sample2">
<div class="swiper-slide"><a href="#second" class="semi red"><img src="img/semi1.png" alt="Swiper01"></a></div>
<div class="swiper-slide"><a href="#second" class="semi pink"><img src="img/semi2.png" alt="Swiper02"></a></div>
<div class="swiper-slide"><a href="#second" class="semi l-purple"><img src="img/semi3.png" alt="Swiper03"></a></div>
<div class="swiper-slide"><a href="#second" class="semi purple"><img src="img/semi4.png" alt="Swiper04"></a></div>
<div class="swiper-slide"><a href="#second" class="semi d-blue"><img src="img/semi5.png" alt="Swiper05"></a></div>
<div class="swiper-slide"><a href="#second" class="semi blue"><img src="img/semi6.png" alt="Swiper06"></a></div>
<div class="swiper-slide"><a href="#second" class="semi skyblue"><img src="img/semi7.png" alt="Swiper07"></a></div>
<div class="swiper-slide"><a href="#second" class="semi green"><img src="img/semi8.png" alt="Swiper08"></a></div>
<div class="swiper-slide"><a href="#second" class="semi y-green"><img src="img/semi9.png" alt="Swiper09"></a></div>
<div class="swiper-slide"><a href="#second" class="semi yellow"><img src="img/semi10.png" alt="Swiper10"></a></div>
<div class="swiper-slide"><a href="#second" class="semi l-orange"><img src="img/semi11.png" alt="Swiper11"></a></div>
<div class="swiper-slide"><a href="#second" class="semi orange"><img src="img/semi12.png" alt="Swiper12"></a></div>
<div class="swiper-slide"><a href="#second" class="semi l-gray"><img src="img/semi13.png" alt="Swiper13"></a></div>
<div class="swiper-slide"><a href="#second" class="semi gray"><img src="img/semi14.png" alt="Swiper14"></a></div>
<div class="swiper-slide"><a href="#second" class="semi l-black"><img src="img/semi15.png" alt="Swiper15"></a></div>
<div class="swiper-slide"><a href="#second" class="semi black"><img src="img/semi16.png" alt="Swiper16"></a></div>
</div>
<div class="swiper-button-prev prev2"></div>
<div class="swiper-button-next next2"></div>
</div>
</section>2番目のスライダーのHTMLです。
CSS
.content-window{
padding: 20px 5%;
height: 30vh;
border:1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.content-text{
width: 100%;
text-align: center;
}
.semi{
display: block;
width: 100%;
}
.semi:hover{
opacity: .7;
}
.semi.is-active{
border-top: 4px solid gold;
}
.prev2,.next2{
top:70%;
width: 32px;
height: 40px;
background-position: center center;
background-size: contain;
}
.prev2 {
left:1%;
background-image: url(../img/arrow_left.png);
}
.next2 {
right:1%;
background-image: url(../img/arrow_right.png);
}2番目のスライダーのCSSです。
Swiperのアローボタンはbackground-imageで任意の画像を指定すると上書き可能なので、自作した矢印を指定しています。
Script
var swiper2 = new Swiper('.swiper2', {
navigation: {
nextEl: '.next2',
prevEl: '.prev2',
},slidesPerView:8,spaceBetween: 5, initialSlide: 0, speed: 300, breakpoints: {
480: {
slidesPerView: 4
}
}
});
$('.semi').click(function () {
$(this).toggleClass('is-active');
$('.semi').not($(this)).removeClass('is-active');
if($(this).hasClass('red')){
$('.content-text').text('赤をクリックしました');
$('.content-window').css('background-color','#FF5757');
}else if($(this).hasClass('pink')){
$('.content-text').text('ピンクをクリックしました');
$('.content-window').css('background-color', '#FF66C4');
}else if($(this).hasClass('l-purple')){
$('.content-text').text('薄い紫をクリックしました');
$('.content-window').css('background-color', '#CB6CE6');
}else if($(this).hasClass('purple')){
$('.content-text').text('紫をクリックしました');
$('.content-window').css('background-color', '#8C52FF');
}else if($(this).hasClass('d-blue')){
$('.content-text').text('濃い青をクリックしました');
$('.content-window').css('background-color', '#5271FF');
}else if($(this).hasClass('blue')){
$('.content-text').text('青をクリックしました');
$('.content-window').css('background-color', '#38B6FF');
}else if($(this).hasClass('skyblue')){
$('.content-text').text('水色をクリックしました');
$('.content-window').css('background-color', '#5CE1E6');
}else if($(this).hasClass('green')){
$('.content-text').text('緑をクリックしました');
$('.content-window').css('background-color', '#7ED957');
}else if($(this).hasClass('y-green')){
$('.content-text').text('黄緑をクリックしました');
$('.content-window').css('background-color', '#C9E265');
}else if($(this).hasClass('yellow')){
$('.content-text').text('黄をクリックしました');
$('.content-window').css('background-color', '#FFDE59');
}else if($(this).hasClass('l-orange')){
$('.content-text').text('薄いオレンジをクリックしました');
$('.content-window').css('background-color', '#FFBD59');
}else if($(this).hasClass('orange')){
$('.content-text').text('オレンジをクリックしました');
$('.content-window').css('background-color', '#FF914D');
}else if($(this).hasClass('l-gray')){
$('.content-text').text('薄い灰色をクリックしました');
$('.content-window').css('background-color', '#D9D9D9');
}else if($(this).hasClass('gray')){
$('.content-text').text('灰色をクリックしました');
$('.content-window').css('background-color', '#A6A6A6');
}else if($(this).hasClass('l-black')){
$('.content-text').text('薄い黒をクリックしました');
$('.content-window').css('background-color', '#737373');
}else if($(this).hasClass('black')){
$('.content-text').text('黒をクリックしました');
$('.content-window').css('background-color', '#545454');
}
});2番目のスライダーのスクリプト部分です。Swiperの設定に関しては既出なので省略します。
・「toggleClass」を用いてクリックされた画像に「is-active」クラスを付与しそれ以外のものの「is-active」クラスを外しています。
・条件分岐部分はクリックされた画像が持っているクラスに応じて、「content-text」クラスのテキストと「content-window」クラスの背景色を変更する処理になります。
サンプル３
ホラーっぽい演出ができないかどうか試してみたものになります。
HTML
<section id="third">
<h2 class="section-heading">サンプル3</h2>
<div class="swiper-container swiper3">
<div class="swiper-wrapper sample3">
<div class="swiper-slide most-big">う</div>
<div class="swiper-slide more-big">わ</div>
<div class="swiper-slide big">あ</div>
<div class="swiper-slide small">あ</div>
<div class="swiper-slide most-small">あ</div>
</div>
</div>
</section>3番目のスライダーのHTMLです。
CSS
.swiper3{
background-color: black;
}
.sample3 > .swiper-slide{
color:red;
text-align: center;
}
.most-big{
font-size: 3rem;
}
.more-big{
font-size: 2.5rem;
}
.big{
font-size: 2rem;
}
.small{
font-size: 1.5rem;
}
.most-small{
font-size: 1rem;
}3番目のスライダーのCSSです。背景色を黒にして文字を赤くするだけでホラー感がアップする気がします。
Script
var swiper3 = new Swiper('.swiper3', {
loop: true,
autoplay: {
delay: 30,
disableOnInteraction: false
},initialSlide: 0, speed: 100,effect:'flip',
});
$(window).resize(function(){
swiper3.autoplay.paused = false;
swiper3.autoplay.start();
});3番目のスライダーのスクリプト部分です。「autoplayのdelay」と「speed」をいい感じになるまで調整しました。effectをflipにするとチラつきが少ないと思います。
ウィンドウのリサイズが行われると自動再生が止まってしまいますがこのサンプルでは止めたくありませんでした。resize()メソッド内でスライダーの「autoplay.paused」をfalseにし、「autoplay.start()」することで解決！
おわりに
実際に使ってみてSwiper.jsの高機能さがよくわかりました。色々作れそうで面白いですね。
