SWIPER実装編

閲覧数: 89(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年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

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

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

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

コメントを残す

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