SWIPER実装編

閲覧数: 105(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閑話, 公開タグ, , , ,
緊急事態宣言で外出自粛になり...

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

検索精度を高める
blank

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

タイトルを抜粋する
blank

関連記事プラグインを使って、記事本文の下に「関連記事」を表示している。情報としては、タイトル、画像、  続きを読む

閲覧数まとめ
blank

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

閃きは大事だw
blank

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

ページナビのテキスト
blank

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

スポンサーリンク

コメントを残す

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