POSTED | 2024.08.23

個人的によく使うSwiperのオプションまとめ①

WWEBのこと

WRITER : Sasayama Sayaka

美術館と美味しいものが大好きなクリエイター

プロフィールを見る

個人的によく使うSwiperのオプションと
よくつくる形のスライドに対するオプションの設定をまとめました。

よく使うSwiperのオプション

ループの設定（初期値：false）

loop: true

スライダーに一度に表示されるスライドの数（初期値：1）

slidesPerView: 3

アクティブなスライドを中央に配置するか否か（初期値：false）

centeredSlides: true

スライド間の遷移時間（ミリ秒）（初期値：300）

speed: 300

スライド間の距離（余白）（px）（初期値：0）

spaceBetween: 40

ページネーションの設定とクリックを有効化

pagination: {
　el: ‘.swiper_pagination’
　,clickable: true, // ページネーションをクリック可能にする
}

スライドの効果（初期値：’slide’）

effect:’slide’

▼設定できる値

‘slide’：横にスライドする
‘fade’：フェードしながら次のスライドに移行
‘cube’：キューブ状の形状でくるくると回転（一度に複数の画像は表示できない）
‘coverflow’：立体的なパネルのような形
‘flip’：一枚の画像をくるくると回転させるようなスライド（一度に複数の画像は表示できない）
‘cards’：重ねたカードを一枚ずつ表示するようなスライド（一度に複数の画像は表示できない）
‘creative’：スライドのフェード効果を自分でカスタマイズできます

よく使うスライダーの種類と設定オプション

中央に一枚表示させる基本のスライダー（ループ）

const swiper = new Swiper(“.swiper”, {
　loop: true, // ループ有効
　pagination: {
　　el: ‘.swiper-pagination’,
　　clickable: true,
　},
　navigation: {
　　nextEl: ‘.swiper-button-prev’,
　　prevEl: ‘.swiper-button-next’,
　}
});

複数枚並べて、アクティブな画像を中央に表示するスライダー（スマホ時には一枚表示に切り替える）

const swiper = new Swiper(“.swiper”, {
　loop: true,
　slidesPerView: 1,
　spaceBetween: 0,
　pagination: {
　　el: ‘.swiper-pagination’,
　　clickable: true,
　},
　navigation: {
　　nextEl: ‘.swiper-button-prev’,
　　prevEl: ‘.swiper-button-next’,
　},
breakpoints: {
　　// 768px以上の場合
　　768: {
　　　slidesPerView: 1.5,
　　　centeredSlides: true,
　　　spaceBetween: 40
　　}
　}
});

この記事をシェアする