Swiper | hirokonaBlog

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

ありがたいので自分のためにも入れ子での使い方メモ
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