見出し画像

Swiperカスタマイズメモ

assassin@Web屋

案件で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を編集する必要があるので御注意を。

宜しければ………