【JavaScript】スライダー系プラグインで人気急上昇中swiperの使い方。

今回はスライダー系jsで人気急上昇中のswiperを解説していきます。
slick.jsのような汎用性に加えスライド時のアニメーションパターンも豊富です。

挙動がおかしくなったりとバグ的な事象も報告されているのでそこも踏まえた対応も記していきます。

swiper基本的な使い方
サムネイル付きスライダー
パララックススライダー
swiperオプション
まとめ

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の更新履歴が新しいので今も絶賛改良中なのがうかがえます。最近のコのイメージ。

【JavaScript】スライダー系プラグインで人気急上昇中swiperの使い方。

swiper基本的な使い方

HTML

JS

ループのときに挙動がおかしい。（ effect: ‘cube’のとき最後のスライダーがスライドしきれない）

ドットナビゲーション（pagination）が効かない。

ブラウザで横スクロールが出てしまう。

自動再生（autoplay）がページャー（pagination）操作後止まってしまう。

swiper不具合修正JSまとめ

サムネイル付きスライダー

HTML

JS

パララックススライダー

HTML

JS

swiperオプション

まとめ

コメントを残すコメントをキャンセル

Recent Posts

【WebGL】Distortion Hover Effectを使っておしゃれなカフェメニューを作ってみた

現場で普段やってるWebデザインのブラッシュアップポイントまとめました。

【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

【three.js】3DWebデザインの参考になるコードスぺニット集

カテゴリー

ブログコンテンツ

ソーシャルメディア

swiper基本的な使い方

HTML

JS

ループのときに挙動がおかしい。（ effect: ‘cube’のとき最後のスライダーがスライドしきれない ）

ドットナビゲーション（pagination）が効かない。

ブラウザで横スクロールが出てしまう。

自動再生（autoplay）がページャー（pagination）操作後止まってしまう。

swiper不具合修正JSまとめ

サムネイル付きスライダー

HTML

JS

パララックススライダー

HTML

JS

swiperオプション

まとめ

コメントを残す コメントをキャンセル

Recent Posts

【WebGL】Distortion Hover Effectを使っておしゃれなカフェメニューを作ってみた

現場で普段やってるWebデザインのブラッシュアップポイントまとめました。

【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

【three.js】3DWebデザインの参考になるコードスぺニット集

カテゴリー

ループのときに挙動がおかしい。（ effect: ‘cube’のとき最後のスライダーがスライドしきれない）

コメントを残すコメントをキャンセル