SWIPER実装編

Swiperの実装編、このサイトで実際に使っているJavaScriptの紹介です。

var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        speed: 600,
        slidesPerView: 3,
        centeredSlides: true,
        direction: 'horizontal',
        effect: 'coverflow',
        breakpoints: {
            480: {
                slidesPerView: 1,
            },
            812: {
                slidesPerView: 2,
            }
        },
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    scrollbar: {
        el: '.swiper-scrollbar',
    },
    coverflowEffect: {
        rotate:     20,
        stretch:    0,
        depth:      200,
        modifier:   1,
        slideShadows:   false,
    },
    mousewheel: {
        invert: true,
    },
});

「effect: ‘coverflow’」のプロパティが「coverflowEffect:」です。以前のバージョンとは記述方法が異なっているので、いろいろなサイトを参考にする時には、単純にコピーするのではなく、どのバージョンで動作するか確認が必要です。「rotate:」で画像の傾きを指定し、「depth:」で重なりの深さを指定するようです。「mousewheel:」の「invert:」はマウスホイールを回転させた時どちらに画像が動くのか、です。個人的には逆だったのでここではこの指定となっています。「scrollbar:」は指定してありますが、画面設定「display-featured.php」の方でコメント化しているので「pagenation:」しか表示されません。オプションが豊富に用意されているのでしばらくはいろいろ試して遊べると思います。こんな便利なライブラリ使わない手はないですね。

最終更新日: 2019年5月20日