Swiperでスライダー


jQuery無しで動くスライダーのプラグイン「Swiper」を入れてみました。導入方法はとても簡単で、cssとjsをダウンロードして読み込むだけ(またはCDNで読み込む)。横にスライドしていくスライダーや、サムネイル付きのスライダーなど色んな種類のスライダーが入っているので使い勝手はいいかなと思います。

Swiper のダウンロード



公式サイトへ行く:http://idangero.us/swiper/

ダウンロードする:https://github.com/nolimits4web/swiper/releases

ちなみに、CDNも用意されているようですね。
CDNの方がお手軽ですが、ここはあえてダウンロードしたいと思います。
案件でCDNはあまりつかはないので 。。。

Swiper 読み込み

ダウンロードしたファイルの中で使用するもの

  • swiper-4.3.3/dist/js/swiper.min.js
  • swiper-4.3.3/dist/css/swiper.min.css

リンクの設置方法は「公式サイト:Swiper | Getting Started With Swiper」に書いてありました。

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

head内にCSS、bodyタグの終了直前にJSファイルを読み込みます。

ソースコード

HTML
<div style="margin:50px 0 0">
  <div class="swiper-container js-swiper-slider">
    <div class="swiper-container js-swiper-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_01.jpg);"></div>
        <div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_02.jpg);"></div>
        <div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_03.jpg);"></div>
        <div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_04.jpg);"></div>
      </div>
      <!-- Arrows -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- Pagination -->
      <div class="swiper-pagination js-swiper-top-pagenation"></div>
    </div>
  </div>
</div>
SCSS
/* 画像のスタイル調整 */
.swiper-slide {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* スライダーのスタイル調整 */
.swiper-container {
  max-width: 600px;
  height: 400px;
  margin: 0 auto;
}
JS
const avoSwiper = new Swiper('.js-swiper-slider', {
  loop: true, //スライドの繰り返し
  autoplay: { //自動再生
    delay: 5000, //5000ミリ秒毎
    disableOnInteraction: false, //ユーザーがスワイプしても自動再生を続ける
  },
  pagination: { // ページネイション
    el: '.js-swiper-top-pagenation', //セレクタ指定
    clickable: true, //ページネイションのクリック操作有効
  },
  navigation: { 
    nextEl: '.swiper-button-next', //次へボタンのセレクタ指定
    prevEl: '.swiper-button-prev', //前へボタンのセレクタ指定
  },
});

Swiper はとにかくオプションがたくさんあります!APIのページに様々なオプションが載っているので、興味のある方は覗いてみると欲しかった機能が見つかるかもしれません。
Swiper API:http://idangero.us/swiper/api/

Demo

https://rachicom.net/contents/demo/swiper/swiper.html

参考URL

swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人

基本的な実装方法については、このサイトがわかりやすかったです。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

簡単スライダー第2弾 〜slick編〜

簡単スライダー第1弾 〜Bootstrap編〜

最新記事

カテゴリー

アーカイブ

ハッシュタグ