今回はスライダー系jsで人気急上昇中のswiperを解説していきます。
slick.jsのような汎用性に加えスライド時のアニメーションパターンも豊富です。
挙動がおかしくなったりとバグ的な事象も報告されているのでそこも踏まえた対応も記していきます。
swiper基本的な使い方
公式サイト：Swiper
公式サイトのGet Started部分にCDN情報があります。
ダウンロードファイル はswiper6.5.0になります。
※最新バージョンではIE11対応が除外されているのでIE11対応が必要な場合はバージョン4系のswiper4.5.1をダウンロードします。
CDNをcss、jsともに以下のように読み込みます。
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>HTML
以下のように実際のスライダー部分（swiper-wrapper ） 、ドットナビゲーション部分（ swiper-pagination ）、前へ次へボタン部分（swiper-button-*）、スクロールバー部分（swiper-scrollbar）を記述します。
<!-- swiperコンテナ -->
<div class="swiper-container">
<!-- swiper -->
<div class="swiper-wrapper">
<!-- スライダー要素 -->
<div class="swiper-slide slide1"><p class="tit_top">Swiper01</p></div>
<div class="swiper-slide slide2"><p class="tit_top">Swiper02</p></div>
<div class="swiper-slide slide3"><p class="tit_top">Swiper03</p></div>
</div>
<!-- dotページャー -->
<div class="swiper-pagination"></div>
<!-- 前へ、次へボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- スクロールバー -->
<div class="swiper-scrollbar"></div>
</div>JS
<script>
const swiper = new Swiper('.swiper-container', {
// オプション
autoplay: {
delay: 3000,// 自動再生3秒ごと
},
loop: true,// ループあり
effect: 'cube', // スライドアニメーション
// dotページャー
pagination: {
el: '.swiper-pagination',
},
// 前へ、次へナビゲーション
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// スクロールバー
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>以上で初期設定は終了ですが以下のような不具合がおこることがあります。
- ループのときに挙動がおかしい。（ effect: ‘cube’のとき最後のスライダーがスライドしきれない ）
- ページャー（pagination）が効かない。
- ブラウザで横スクロールが出てしまう。
- 自動再生（autoplay）がドットナビゲーション（pagination）操作後止まってしまう。
ループのときに挙動がおかしい。（ effect: ‘cube’のとき最後のスライダーがスライドしきれない ）
以下の追加で修正されました。
cube: {
shadow: false,
slideShadows: false
}[Swiper.js] ループした際に最後のスライドが一枚目に表示されてしまう
https://teratail.com/questions/66762
ドットナビゲーション（pagination）が効かない。
以下の修正で改善されました。
pagination部分にtype: ‘bullets’,と clickable: true,の追加で改善されました。
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},Swiper.js が動作しない原因と対応方法【javascript】
https://choppydays.com/swiper-js-prev-next-button-not-working-javascript/
ブラウザで横スクロールが出てしまう。
CSSでoverflow: hidden;を追加することで改善されました。
#wrapper{
margin: 0;
width: 100%;
overflow: hidden;
}自動再生（autoplay）がページャー（pagination）操作後止まってしまう。
autoplayにdisableOnInteraction: false,を追加することで改善されました。
autoplay: {
delay: 2000,
disableOnInteraction: false,
},swiper (v4.5.3) 使ってみたオプションまとめ
https://medium.com/@bbxxuw/swiper-v4-5-3-%E3%83%A1%E3%83%A2-263915fca957
swiper不具合修正JSまとめ
<script>
const swiper = new Swiper('.swiper-container', {
// Optional parameters
autoplay: {
delay: 2000,
disableOnInteraction: false, // ★autoplay停止修正部分
},
loop: true,
effect: 'cube',
cube: { // ★ループ不具合修正追加部分
shadow: false,
slideShadows: false
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
type: 'bullets', // ★ページャー（pagination）不具合追加部分
clickable: true, // ★ページャー（pagination）不具合追加部分
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>サムネイル付きスライダー
サムネイル用でgalleryThumbs、メインスライダーでgalleryTopとして、2種のスライダーを初期化設定する必要があります。
HTML
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/img01.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img02.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img03.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img04.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img05.jpg)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(img/img01.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img02.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img03.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img04.jpg)"></div>
<div class="swiper-slide" style="background-image:url(img/img05.jpg)"></div>
</div>
</div>メインスライダー（ galleryTop ）部分でサムネイルスライダー（ galleryThumbs ）を以下のように紐づけします。
thumbs: { swiper: galleryThumbs, },
JS
<script>
//サムネイルスライダー
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
freeMode: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
//メインスライダー
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
</script>パララックススライダー
パララックス（ 視差 ）効果をしたい要素に属性data-swiper-parallax=”任意の数値”を設定します。
数値がマイナスであるほど遅く視差効果が表れます。
HTML
<div class="swiper-slide" style="background-image:url(img/img01.jpg)">
<div class="title" data-swiper-parallax="-1000">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-500">Subtitle</div>
<div class="text" data-swiper-parallax="-300">
<p>Lorem ipsum </p>
</div>
</div>JS
オプションでパララックスを有効にします。
parallax: true,swiperオプション
| 表記例 | 概要 |
|---|---|
| navigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’, } | 次へ、前へボタンの設定 |
| pagination: { el: ‘.swiper-pagination’, }, | ドットナビゲーションswiper-pagination の設定 |
| pagination: { el: ‘.swiper-pagination’, dynamicBullets: true, } | dynamicBulletsの設定でカレントのナビゲーションを大きくする |
| pagination: { el: ‘.swiper-pagination’, type: ‘progressbar’, }, | progressbarでプログレスバー形式、 fractionで分数形式が設定できる |
| pagination: { el: ‘.swiper-pagination’, clickable: true, renderBullet: function (index, className) { return ” + (index + 1) + ”; }, }, | クラス名やページ番号などのカスタムができる |
| scrollbar: { el: ‘.swiper-scrollbar’, hide: true, }, | スクロールバーが存在する場合の紐づけの設定、hideで非表示設定 |
| direction: ‘vertical’ | verticalでスライダーが垂直に移動する |
| spaceBetween: 30 | スライダー間にマージンをとる |
| slidesPerView: 3 | スライダーの表示数を3枚に設定 auto にすると画像サイズにより調整する |
| centeredSlides: true | スライダーが複数ある場合カレントのスライダーをセンタリングする |
| freeMode: true | 移動時にスライダーにスナップしなくなる（ スライドの途中でも止まる ） |
| slidesPerColumn: 2 | スライダーの表示列を2列にする |
| grabCursor: true | カーソルをグローブにする |
| loop: true, | スライダーをループする（ 最初と最後のスライダーをつなげる ） |
| slidesPerGroup: 3 | 一度にスライドする数を設定する |
| effect: ‘fade’ | fade：フェード効果 cube：3D立方体の効果 coverflow：Swipeの公式TOPで使用 flip ：フリップがめくれるような効果 |
| keyboard: { enabled: true, } | キーボードで操作できる |
| mousewheel: true | マウスホイールで操作できる |
| autoplay: { delay: 2500, disableOnInteraction: false, } | 自動再生の設定 スライダーごとに2.5秒停止 disableOnInteraction: false でユーザがナビゲーション操作後も自動再生が継続される |
| thumbs: { swiper: galleryThumbs } | サムネイルの紐づけの設定 |
| hashNavigation: { watchState: true, } | スライダーに data-hash=”hashname”を設定することで#ハッシュつきURLを設定できる |
| parallax: true, | パララックス（視差）効果を設定できる スライダー属性にdata-swiper-parallax=”-300″ などと視差の数値を設定する |
| lazy: true | 画像遅延読み込み設定 スライダーにクラス .swiper-lazy を設定し、 data-srcで画像ファイルを設定する <img data-src=”./images/nature-6.jpg” class=”swiper-lazy”> |
| breakpoints: { 640: { slidesPerView: 2, spaceBetween: 20, }, } | ブレイクポイントごとにオプションを変更できる |
| zoom: true | ダブルクリックでズームする |
まとめ
設定自体はそこまでシンプルではありませんが jsでかなり細かくカスタマイズができます。
現時点で挙動がおかしくなったり最新バージョンのIE対応除外を踏まえると同じスライダー系プラグインでも通常はslick、スライド時のアニメーションを重視するならSwiperと、使い分けることをおすすめします。
GitHubの更新履歴が新しいので今も絶賛改良中なのがうかがえます。最近のコのイメージ。
