カテゴリー
js 開発関連

swiperのイベント発生タイミング

タイムラインでまとめてくれてるのありがたいからメモ

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2022/04/swiper/#i-3
カテゴリー
js 開発関連

swiperのデフォルトprevnextのSVGのfill色を変える。

あ、出来るんや、っておもったからめも。
DLしたswiperのcssをいじる
.swiper-button-next
.swiper-button-prev
のbackgroundに指定されているsvgのbase64URLの下記部部分を変更
fill%3D’%23007aff

007affが色コードなので
赤にしたければ

fill%3D’%23ff0000

に変更。
同様にbulletの色も007affの部分を一括置換で変更できる。
(ご利用は自己責任なやつです)

カテゴリー
js

Swiperのautoplayがフリック後も止まらないようにする

ユーザーアクション後も止まらないようにするには指定が必要

大事。
autoplayDisableOnInteraction:false,

autoplay: { delay: 2500, disableOnInteraction: false, },
もあるけど、こっちはなんかマルチスライドだとバグったので上の記法で回避。

Swiperのページネーションクリック後の動作について – Sketch & Jump
http://memo.ufufuya.com/entry/2017/12/05/125439

カテゴリー
js

Swiperさんに敬意を評していろいろメモっとこうそうしよう 入れ子での使い方注意点

今更ですがガッツリ使ったので。

ありがたいので自分のためにも入れ子での使い方メモ
Swiper – Most Modern Mobile Touch Slider
http://idangero.us/swiper/#.V6WlbpOLTXQ

入れ子で使えますか?

使えます!

コンテンツ領域のスライドギャラリーをSwiperで作って、
下部にSwiperでコンテンツサムネ画像のインデックスを配置、
更にコンテンツ領域の中にイメージギャラリーをSwiperで作りました。

Swiper Demos
http://idangero.us/swiper/demos/#.V6WlzZOLTXR

Nested Swipersを検索
基本の使い方が出ます。

入れ子にしたらprev nextナビがバグったんですが

入れ子にした複数のswiperで同じクラス名のナビを使おうとしていませんか。

コンテナ毎に変更しましょう

        var setSwiper = function(e){
            SwiperContent = new Swiper('#SwiperContent', {
                nextButton: '#SwiperContentNext',
                prevButton: '#SwiperContentPrev',
                // pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 120,
                // Disable preloading of all images
                preloadImages: false,
                // Enable lazy loading
                lazyLoading: true

<pre><code>        });

        SwiperContentCtrl = new Swiper('#SwiperContentCtrl', {

            nextButton: '#SwiperContentCtrlNext',
            prevButton: '#SwiperContentCtrlPrev',
            // pagination: '.swiper-pagination',
            centeredSlides: true,
            slidesPerView: 7,
            paginationClickable: true,
            spaceBetween: 12,
            slideToClickedSlide: true,
            // effect: 'fade'

        });
    };
</code></pre>

※別にidで指定する必要はありません。同じクラス名でなければOK

ギャラリーのページネーションをSwiperで作ったサムネ一覧にしたい

SwiperとSwiperを関連付けましょう

        var setSwiper = function(e){
            SwiperContent = new Swiper('#SwiperContent', {
                nextButton: '#SwiperContentNext',
                prevButton: '#SwiperContentPrev',
                // pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 120,
                // Disable preloading of all images
                preloadImages: false,
                // Enable lazy loading
                lazyLoading: true

<pre><code>        });

        SwiperContentCtrl = new Swiper('#SwiperContentCtrl', {

            nextButton: '#SwiperContentCtrlNext',
            prevButton: '#SwiperContentCtrlPrev',
            // pagination: '.swiper-pagination',
            centeredSlides: true,
            slidesPerView: 7,
            paginationClickable: true,
            spaceBetween: 12,
            slideToClickedSlide: true,
            // effect: 'fade'

        });


        SwiperContent.params.control = SwiperContentCtrl;
        SwiperContentCtrl.params.control = SwiperContent;

    };
</code></pre>

Swiperをnewするときにつけた名前からパラメーターを辿れます。
SwiperName.params.controlで、別に作ったSwiperと連動させることが出来ます。

詳しくは…
Swiper API
http://idangero.us/swiper/api/#.V6Wnk5OLTXQ

params.controlで検索!!

モーダルでフェードインさせたら崩れた

updateシテクダサーイ。初期は隠しておく、コンテンツの追加するなどはupdateシテクダサーイ

You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper

詳しくは…
Swiper API
http://idangero.us/swiper/api/#.V6Wnk5OLTXQ

updateで検索!!

入れ子の中身はクラスで指定してるから名前から辿れなくてupdate出来ない。。。

複数ある場合は全てその名前の配列に入ってるのでSwiperGallery[0]とかでアクセスできる。

            SwiperGallery = new Swiper('.SwiperGallery', {
                nextButton: '.SwiperGalleryNext',
                prevButton: '.SwiperGalleryPrev',
            });
            SwiperGallery[0].update();