【Swiper】
様々なスライダーを実装
はじめに
概要
このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプション設定、カスタマイズ方法、および応用例が含まれています。スライダーを使用することで、画像やコンテンツを魅力的に表示するインタラクティブなユーザーインターフェースを構築できます。
目次
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装内容
パターン1 slide
パターン2 Fade
パターン3 CoverFlow
パターン4 無限スタイだー
GitHub
コードの詳細はこちらを参照にしてください。
ポイント解説
実際のWebサイトでは、同じページ内でスライドやフェードインといったアニメーションがよく使われています。これを同じライブラリを使って実装するのは少し難しいですが、以下のポイントを抑えることが大切と考えます。
Swiperのコード
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=5" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>上記はSwiperのデフォルトのコード例です。ここで注目したいのが’mySwiper’クラスです。このクラス名は任意でどのようなクラス名を設定しても良いです。同じページにswiperを実装する場合は、このクラスをptn01,ptn02・・・等に変更し、それらを指定することでそれぞれを区別することができます。
使用例
以下は上記のアニメーションの指定例です。swiper ptn01等に設定し記述しています。
// パターン01
new Swiper(".ptn01", {
loop: true,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 1.5,
spaceBetween: 30,
},
},
});
// パターン02
new Swiper(".ptn02", {
loop: true,
effect: "fade",
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// パターン03
new Swiper(".ptn03", {
loop: true,
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 2.2,
spaceBetween: 10,
},
},
});
// パターン04
new Swiper(".ptn04", {
spaceBetween: 10,
loop: true, // ループ有効
slidesPerView: 3, // 一度に表示する枚数
speed: 6000, // ループの時間
allowTouchMove: false, // スワイプ無効
autoplay: {
delay: 0, // 途切れなくループ
},
});まとめ
- Swiperを同ページ内で実装する方法を解説
- 任意のクラス名を設定する
- クラス名が被らないように注意する
- Swiperには様々なオプションが準備されている