今更ですがガッツリ使ったので。
ありがたいので自分のためにも入れ子での使い方メモ
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]
コメントを残す