タイムラインでまとめてくれてるのありがたいからメモ
【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISKhttps://b-risk.jp/blog/2022/04/swiper/#i-3
あ、出来るんや、っておもったからめも。
DLしたswiperのcssをいじる
.swiper-button-next
.swiper-button-prev
のbackgroundに指定されているsvgのbase64URLの下記部部分を変更
fill%3D’%23007aff
007affが色コードなので
赤にしたければ
fill%3D’%23ff0000
に変更。
同様にbulletの色も007affの部分を一括置換で変更できる。
(ご利用は自己責任なやつです)
大事。
autoplayDisableOnInteraction:false,
autoplay: { delay: 2500, disableOnInteraction: false, },
もあるけど、こっちはなんかマルチスライドだとバグったので上の記法で回避。
Swiperのページネーションクリック後の動作について – Sketch & Jump
http://memo.ufufuya.com/entry/2017/12/05/125439
ありがたいので自分のためにも入れ子での使い方メモ
Swiper – Most Modern Mobile Touch Slider
http://idangero.us/swiper/#.V6WlbpOLTXQ
コンテンツ領域のスライドギャラリーをSwiperで作って、
下部にSwiperでコンテンツサムネ画像のインデックスを配置、
更にコンテンツ領域の中にイメージギャラリーをSwiperで作りました。
Swiper Demos
http://idangero.us/swiper/demos/#.V6WlzZOLTXR
Nested Swipersを検索
基本の使い方が出ます。
コンテナ毎に変更しましょう
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
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で検索!!
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で検索!!
SwiperGallery = new Swiper('.SwiperGallery', { nextButton: '.SwiperGalleryNext', prevButton: '.SwiperGalleryPrev', }); SwiperGallery[0].update();