UPDATE：2024.8.23
- CATEGORY
個人的によく使うSwiperのオプションまとめ①
Contents
個人的によく使うSwiperのオプションとよくつくる形のスライドに対するオプションの設定をまとめました。
よく使うSwiperのオプション
ループの設定（初期値：false）
loop: true
スライダーに一度に表示されるスライドの数（初期値：1）
slidesPerView: 3
アクティブなスライドを中央に配置するか否か（初期値：false）
centeredSlides: true
スライド間の遷移時間（ミリ秒）（初期値：300）
speed: 300
スライド間の距離（余白）（px）（初期値：0）
spaceBetween: 40
ページネーションの設定とクリックを有効化
pagination: {
el: ‘.swiper_pagination’
,clickable: true, // ページネーションをクリック可能にする
}
el: ‘.swiper_pagination’
,clickable: true, // ページネーションをクリック可能にする
}
スライドの効果（初期値：’slide’）
effect:’slide’
よく使うスライダーの種類と設定オプション
中央に一枚表示させる基本のスライダー（ループ）
const swiper = new Swiper(“.swiper”, {
loop: true, // ループ有効
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
navigation: {
nextEl: ‘.swiper-button-prev’,
prevEl: ‘.swiper-button-next’,
}
});
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
}
}
});
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
}
}
});
‘fade’：フェードしながら次のスライドに移行
‘cube’：キューブ状の形状でくるくると回転（一度に複数の画像は表示できない）
‘coverflow’：立体的なパネルのような形
‘flip’：一枚の画像をくるくると回転させるようなスライド（一度に複数の画像は表示できない）
‘cards’：重ねたカードを一枚ずつ表示するようなスライド（一度に複数の画像は表示できない）
‘creative’：スライドのフェード効果を自分でカスタマイズできます