![見出し画像](https://assets.st-note.com/production/uploads/images/10696515/rectangle_large_type_2_bee41953dac8a0d3e9fe184ff4b6cce4.jpeg?width=1200)
Swiperカスタマイズメモ
案件でSwiprerを使用した際に、カスタマイズで躓いたポイントのメモです。
Swiperとは?
一般的にスライダーライブラリと言えば、「Slick」「FlexSlider」などがありますが、実装にあたりjQueryプラグインの導入が必要でした。
ですが、この「Swiper」はjQueryに依存しない高機能なライブラリ。
「Slick」は以前に実装経験がありますが、今ちょっと話題のこの「Swiper」がどんな感じなのか気になったので、使ってみました。
ほんと凄い。
このライブラリ、PC・スマホのレスポンシブ対応はもちろん、フリックにも対応しており、かつパラメータが豊富なので、凝ったスライドショーも比較的簡単に実装できちゃいます。これは今後かなりお世話になりそうw
公式サイトのDemoを見てもらえば、その機能性の高さが実感できると思います。
今回、サムネイル付きのスライドショーを実装したのですが、途中、基本的な?ポイントで躓きました。
スライドショーの位置がずれる
画像ループあり+スライドショー自動再生+サムネイル
var slider = new Swiper ('#slider', {
slidesPerView: 1, //一度に表示する画像数
autoplay: 5000, //自動再生時の速度
loop: true, //画像をループさせるか否か
centeredSlides : true,
disableOnInteraction: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true
});
slider.params.control = thumbs;
thumbs.params.control = slider;
上記のようなコードで実装した時、スライドショーの画像がずれる事象が発生したのです。
スライドショーの画像だけでなく、下のサムネイルも位置がずれてしまっています。原因が分からず四苦八苦していると、オプションの記述が足りないことが分かりました。
var slider = new Swiper ('#slider', {
slidesPerView: 1,
autoplay: 5000,
loop: true, //デフォルトではfalse(無効)
loopedSlides: 6, //ここ!
centeredSlides : true,
disableOnInteraction: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
loop: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true
});
slider.params.control = thumbs;
thumbs.params.control = slider;
loop: trueの場合、loopedSlidesの設定が必須とのこと。
サンプルでは画像6枚なので、"6"としています。
結果
ちなみに、loopedSlidesオプションの定義は「最初のスライドの前、最後のスライドの後に複製される非表示のスライド数を設定」というもの。
これがループ後の位置ずれに起因していたようです。
ちなみにslidesPerViewの値を変えると、一度に見せる画像枚数を変えることも出来ます。矢印の位置はcssで中心画像に移動させています。
.swiper-button-prev {
margin-left: 25%;
}
.swiper-button-next {
margin-right: 25%;
}
ほかにもeffectのオプションを設定すると、coverflowやflickのような凝ったスライドショーも作成できるのですが、エフェクトの種類によってはcssを編集する必要があるので御注意を。
宜しければ………