見出し画像

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

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

数ある記事の中から目に留めて頂き、有難うございます!

感&謝!(*'∀'人)
2
ジュエリーデザイナー上がりのWEB屋。ウェブデザイン、コーディング、ビジュアル作成、DTPなどなど。 WEBに携わり、かれこれ10年以上。仕事のつぶやき、役立ちそうなコト、煮詰まったコトなどの備忘録として。 アイコン画像は我が家の愛猫トフィー。

この記事が入っているマガジン

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。