【趣味の領域】スライダー内スライダーを作ってみた
有名どころのスライダープラグイン「Swiper」と「slick.js」､「bxSlider」を使って､スライダーの中にスライダーを作ってみました｡
できたのがこちら｡
Swiperの中にslickを設置したところ､動きました｡
ちなみに､つまんでスワイプすると､外側のSwiperがページ送りされるようです｡
動く組み合わせ
「Swiper」「slick」「bxSlider」の3つの組み合わせで色々試したところ
- Swiperの中にslick
- slickの中にbxSlider
のみ動きました｡
bxSliderの中にSwiperやslickを設置したところ､中のスライド (Swiperやslick) のコントロールが効かず､ページ送りができませんでした｡
slickの中にSwiperを設置したところ､どうもslickのレイアウトが安定しませんでした｡
また「Swiperの中にSwiper」「slickの中にslick」「bxSliderの中にbxSlider」のように
スライダーの中に同じプラグインのスライダーを作ることはできませんでした｡
「slickの中にbxSlider」のサンプルがこちら｡こちらも安定して動いています｡
つまんでスワイプすると､slickとbxSliderの両方がページ送りされるようです｡
HTML
「slickの中にbxSlider」のHTMLはこんな感じ｡slickの各スライドにbxSliderを設置しているだけ｡ごくごく普通です｡
<div class="slick">
<div class="slide">
<div class="bxslider">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
<div><img src="img04.jpg"></div>
</div>
</div>
<div class="slide">
<div class="bxslider">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
<div><img src="img04.jpg"></div>
</div>
</div>
<div class="slide">
<div class="bxslider">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
<div><img src="img04.jpg"></div>
</div>
</div>
<div class="slide">
<div class="bxslider">
<div><img src="img01.jpg"></div>
<div><img src="img02.jpg"></div>
<div><img src="img03.jpg"></div>
<div><img src="img04.jpg"></div>
</div>
</div>
</div>JS
JSはこんな感じ｡
ごくごく普通にslickとbxSliderを実行しているだけです｡
$(".slick").slick({
centerMode: true,
variableWidth: true
});
$(".bxslider").bxSlider();実行する順番とかも関係無さそうでした｡
【神の領域】スライダー内スライダー内スライダー
先ほど「Swiperの中にslick」「slickの中にbxSlider」のみ動きました｡ と書きましたが､
なら「Swiperの中にslickの中にbxSlider」は動くのか？
動きました笑
青いのがSwiperのぺージャーで､白っぽいのがslickのぺージャー､グレーがbxSliderのぺージャーです｡
何気なくスマホ対応までできてます笑
特に難しいことはしてません｡
普通にSwiperの中にslickの中にbxSliderを設置して､実行しているだけです｡ CSSは少し整えてますけどね｡
またつまらんものを作ってしまいました...
コメント
「できました！」などの報告もお待ちしております｡
