SWIPER実装編

閲覧数: 102(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閑話, 公開タグ, , , ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

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

スポンサーリンク

コメントを残す

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