トップページに横いっぱいに広るスライダーのあるサイトって格好いいよね。
カルセルスライダーの事だね。Swiper.js を使用すれば簡単に設置できるよ。
Swiper.js によるカルセルスライダーの作成方法になります。
※前提条件としてSwiper.jsのCDNをcss・JSの両方読み込んでおいてください。
▼ HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- Swiper START --> <div class="swiper-container"> <!-- メイン表示部分 --> <div class="swiper-wrapper"> <!-- 各スライド --> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_1.jpg" alt="" width="100%" class="alignnone size-full wp-image-112" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_2.jpg" alt="" width="100%" class="alignnone size-full wp-image-113" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_3.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_4.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_5.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_6.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_7.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> <div class="swiper-slide"><img src="https://web-technology.work/wp/wp-content/uploads/2020/08/slide_8.jpg" alt="" width="100%" class="alignnone size-full wp-image-114" /></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- Swiper END --> |
▼ JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- JS発動スクリプト --> <script> var mySwiper = new Swiper ('.swiper-container', { autoplay : "2000", loop: true, slidesPerView: 3, spaceBetween: 10, centeredSlides : true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev' }) </script> |
slidesPerView の記述で最初から表示する画像の枚数を指定、 autoplay :で自動再生とスライダーのスピードを指定。
エフェクト指定の記述は削除し、新たに spaceBetween: 10,を追記してあります。これはスライドとスライドのマージン間隔を指定するものです。
実装デモ
パソコンではカルセルスマホでは枚数を制限するレスポンシブ対応
いっぱい並ぶとかっこいいね。配置する位置をbootstrapのように横幅いっぱいだととてもカッコいいかも・・・
あれ、だけど、これスマホだと逆にスライド一つ一つが小さくなってみずらくなるね。
あれ、だけど、これスマホだと逆にスライド一つ一つが小さくなってみずらくなるね。
そんな時はJSにレスポンシブ対応の記述を加えればスマホでは1枚表示のスライドになるよ。以下を追記するんだ
|
1 2 3 4 5 6 |
breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } |
実際に追加するとJSはこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- JS発動スクリプト --> <script> var mySwiper = new Swiper ('.swiper-container', { autoplay : "2000", loop: true, slidesPerView: 3, spaceBetween: 10, centeredSlides : true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } }) </script> |
breakpointsで横幅をどれくらいから適用されるかを指定します。（ここではスマホから対応）slidesPerView はスマホでの表示プレビュー数でここでは1枚を指定しています。
