hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

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

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

updateで検索!!

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

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

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


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

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