swiperの基本形のよく使う設定
※本記事のコードは参考用です。使用前にご自身で動作確認をお願いします。
大抵これでOKな基本設定
//メインビジュアル
const mvSwiper = new Swiper('.mv-swiper', {
slidesPerView: 1,
effect: 'fade',
loop: true,
autoplay: {
delay: 4000,
},
});
//ブログとか
const blogSwiper = new Swiper('.blog-swiper', {
slidesPerView: 1.5,
spaceBetween: 20,
mousewheel: {
forceToAxis: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: '.swiper-scrollbar',
},
});その他よく使う設定
スライド幅を固定する
slidesPerView: "auto"を指定して、.swiper-slideにwidthを設定するとスライド幅を固定できます。
const swiper = new Swiper('.swiper', {
slidesPerView: "auto",
});右側にはみ出すswiper
swiperの一番外側.swiperにoverflow: visibleをかけます。本来隠れている先のスライドが表示されて、はみ出ているような感じになります。
.swiper {
overflow: visible;
}.swiperにデフォルトでかかっているoverflow: hiddenがきちんと上書きされるように気をつけてください。
スライドを2枚目から始める
initialSlide: 1でOKです。1枚目は0から始まります。
const swiper = new Swiper('.swiper', {
initialSlide: 1,
});1枚ずつスライドしないようにする
freeMode: trueを指定するとスライドにスナップせずに滑らかにスクロールするようになります。横長の一枚画像などに使えます。
const swiper = new Swiper('.swiper', {
freeMode: true,
});swiperの方向にのみマウス操作を可能にする
const swiper = new Swiper('.swiper', {
mousewheel: {
forceToAxis: true,
},
});