jQuery/Vanilla Javascript

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

公式サイト: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)操作後止まってしまう。

以下の追加で修正されました。

cube: {
shadow: false,
slideShadows: false
}

[Swiper.js] ループした際に最後のスライドが一枚目に表示されてしまう

https://teratail.com/questions/66762

以下の修正で改善されました。
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に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
<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,

サンプル

表記例概要
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と、使い分けることをおすすめします。

uhaha

GitHubの更新履歴が新しいので今も絶賛改良中なのがうかがえます。最近のコのイメージ。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*