SWIPER実装編

閲覧数: 84(0)

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日】
カテゴリーIT閑話, 公開タグ, , , ,
関連記事
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください