スライダープラグイン Swiper で中央寄せに！そして両端の見切れ具合の調整方法。

jQuery不要でレスポンシブ＆タッチ対応のスライダーを簡単に実装できるSwiperですが、中央寄せの方法にやや癖があります。左右の見切れ具合などちょうど良い具合にするのにちょっと手間取ったので自分の使った方法をメモしておこうと思います。

Swiper公式はこちらから。

slidesPerViewを小数点まで指定する

中央寄せ自体は「centeredSlides」で調整可能ですが、これだと左右の見切れは実現出来ません。それを実現するためのポイントは簡単。「slidesPerView」に対して小数点を記述するだけです…！

const mySwiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 1.5, // スマホでは1枚を中央に、.5で見切れ具合を調整
    spaceBetween:10,
    centeredSlides : true,
    breakpoints: {
        768: {
            slidesPerView: 3.5,// PCでは3枚を中央に、.5で見切れ具合を調整
            spaceBetween:20,
        }
    },
})

小数点の値によって見切れる量の調整が出来ます。

まさか小数点の指定が出来るとは思いませんでした…。これだけで機能そのままに中央寄せ＆左右見切れが実現出来るので、ぜひお試しくださいませ。