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で同じクラス名のナビを使おうとしていませんか。

コンテナ毎に変更しましょう
[html]
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

        });

        SwiperContentCtrl = new Swiper('#SwiperContentCtrl', {

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

        });
    };

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

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

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

[html]
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

        });

        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;

    };

[/html]

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