こんにちは！セミマサです。
非常に評価の高いスライダープラグイン「Swiper.js」を使ってみました！3パターン制作したので備忘録としてそれぞれのポイントをまとめていきたいと思います。
デモサイト
下のボタンから今回のデモサイトへ行けます。
共通部分のCSS
1 2 3 4 5 6 7 8 | .swiper-container{ width:80%; padding:5vh0; } .swiper-slideimg{ width:100%; } |
3つあるデモスライダーの共通CSSです。
サンプル１
アクティブでないスライドを暗くしてみました。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <sectionid="first"> <h2class="section-heading">サンプル1</h2> <divclass="swiper-container swiper1"> <divclass="swiper-wrapper sample1"> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample1.png"alt="Swiper01"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample2.png"alt="Swiper02"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample3.png"alt="Swiper03"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample4.png"alt="Swiper04"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample5.png"alt="Swiper05"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample6.png"alt="Swiper06"></a></div> <divclass="swiper-slide"><ahref="#"><imgsrc="img/sample7.png"alt="Swiper07"></a></div> </div> <divclass="swiper-pagination pagination1"></div> <divclass="swiper-button-prev prev1"></div> <divclass="swiper-button-next next1"></div> </div> </section> |
１つ目のスライダーのHTMLです。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | varswiper1=newSwiper('.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <sectionid="second"> <h2class="section-heading">サンプル2</h2> <divclass="content-window"> <pclass="content-text">セミ君をクリックしてね！</p> </div> <divclass="swiper-container swiper2"> <divclass="swiper-wrapper sample2"> <divclass="swiper-slide"><ahref="#second"class="semi red"><imgsrc="img/semi1.png"alt="Swiper01"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi pink"><imgsrc="img/semi2.png"alt="Swiper02"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi l-purple"><imgsrc="img/semi3.png"alt="Swiper03"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi purple"><imgsrc="img/semi4.png"alt="Swiper04"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi d-blue"><imgsrc="img/semi5.png"alt="Swiper05"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi blue"><imgsrc="img/semi6.png"alt="Swiper06"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi skyblue"><imgsrc="img/semi7.png"alt="Swiper07"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi green"><imgsrc="img/semi8.png"alt="Swiper08"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi y-green"><imgsrc="img/semi9.png"alt="Swiper09"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi yellow"><imgsrc="img/semi10.png"alt="Swiper10"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi l-orange"><imgsrc="img/semi11.png"alt="Swiper11"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi orange"><imgsrc="img/semi12.png"alt="Swiper12"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi l-gray"><imgsrc="img/semi13.png"alt="Swiper13"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi gray"><imgsrc="img/semi14.png"alt="Swiper14"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi l-black"><imgsrc="img/semi15.png"alt="Swiper15"></a></div> <divclass="swiper-slide"><ahref="#second"class="semi black"><imgsrc="img/semi16.png"alt="Swiper16"></a></div> </div> <divclass="swiper-button-prev prev2"></div> <divclass="swiper-button-next next2"></div> </div> </section> |
2番目のスライダーのHTMLです。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | .content-window{ padding:20px5%; height:30vh; border:1pxsolid#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:4pxsolidgold; } .prev2,.next2{ top:70%; width:32px; height:40px; background-position:centercenter; 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | varswiper2=newSwiper('.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'); }elseif($(this).hasClass('pink')){ $('.content-text').text('ピンクをクリックしました'); $('.content-window').css('background-color','#FF66C4'); }elseif($(this).hasClass('l-purple')){ $('.content-text').text('薄い紫をクリックしました'); $('.content-window').css('background-color','#CB6CE6'); }elseif($(this).hasClass('purple')){ $('.content-text').text('紫をクリックしました'); $('.content-window').css('background-color','#8C52FF'); }elseif($(this).hasClass('d-blue')){ $('.content-text').text('濃い青をクリックしました'); $('.content-window').css('background-color','#5271FF'); }elseif($(this).hasClass('blue')){ $('.content-text').text('青をクリックしました'); $('.content-window').css('background-color','#38B6FF'); }elseif($(this).hasClass('skyblue')){ $('.content-text').text('水色をクリックしました'); $('.content-window').css('background-color','#5CE1E6'); }elseif($(this).hasClass('green')){ $('.content-text').text('緑をクリックしました'); $('.content-window').css('background-color','#7ED957'); }elseif($(this).hasClass('y-green')){ $('.content-text').text('黄緑をクリックしました'); $('.content-window').css('background-color','#C9E265'); }elseif($(this).hasClass('yellow')){ $('.content-text').text('黄をクリックしました'); $('.content-window').css('background-color','#FFDE59'); }elseif($(this).hasClass('l-orange')){ $('.content-text').text('薄いオレンジをクリックしました'); $('.content-window').css('background-color','#FFBD59'); }elseif($(this).hasClass('orange')){ $('.content-text').text('オレンジをクリックしました'); $('.content-window').css('background-color','#FF914D'); }elseif($(this).hasClass('l-gray')){ $('.content-text').text('薄い灰色をクリックしました'); $('.content-window').css('background-color','#D9D9D9'); }elseif($(this).hasClass('gray')){ $('.content-text').text('灰色をクリックしました'); $('.content-window').css('background-color','#A6A6A6'); }elseif($(this).hasClass('l-black')){ $('.content-text').text('薄い黒をクリックしました'); $('.content-window').css('background-color','#737373'); }elseif($(this).hasClass('black')){ $('.content-text').text('黒をクリックしました'); $('.content-window').css('background-color','#545454'); } }); |
2番目のスライダーのスクリプト部分です。Swiperの設定に関しては既出なので省略します。
・「toggleClass」を用いてクリックされた画像に「is-active」クラスを付与しそれ以外のものの「is-active」クラスを外しています。
・条件分岐部分はクリックされた画像が持っているクラスに応じて、「content-text」クラスのテキストと「content-window」クラスの背景色を変更する処理になります。
サンプル３
ホラーっぽい演出ができないかどうか試してみたものになります。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 | <sectionid="third"> <h2class="section-heading">サンプル3</h2> <divclass="swiper-container swiper3"> <divclass="swiper-wrapper sample3"> <divclass="swiper-slide most-big">う</div> <divclass="swiper-slide more-big">わ</div> <divclass="swiper-slide big">あ</div> <divclass="swiper-slide small">あ</div> <divclass="swiper-slide most-small">あ</div> </div> </div> </section> |
3番目のスライダーのHTMLです。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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
1 2 3 4 5 6 7 8 9 10 11 | varswiper3=newSwiper('.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の高機能さがよくわかりました。色々作れそうで面白いですね。
