高機能なスライダー”Swiper”の紹介と使い方

JavaScript/jQuery

今回はとても高機能で、多くのサイトで使われているスライダー”Swiper”を紹介したいと思います。
Swiperのサイトではたくさんの機能やデモを見ることができます。

https://swiperjs.com/

Swiperの使い方

ダウンロードまたはCDNを利用することができます

・ダウンロードして利用する場合
ダウンロードサイトからCSSとJSのファイルをダウンロードしてサイトのフォルダに設置することで利用できます。

・CDNを利用する場合
CDNを利用する場合は以下のものが利用できます。


<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

htmlの記述

htmlの記述例は下の通りです。
“Slide 1″から”Slide 3”の部分にスライドとして表示させたいものを入れます。(数は必要に応じて変えてください。)
”pagination”、”navigation button”、”scrollbar”は必要に応じて記述してください。


<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

scriptに各種設定を記述

基本的な設定例

”direction”には”horizontal”か”vertical”を指定でき、スライドの方向を設定します。
”loop”はスライドが最後まで行ったときにループさせるかどうかを”true”か”false”で指定します。


<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
  </script>

レスポンシブの設定例

”slidesPerView”で何枚のスライドを表示させるかを設定し、”spaceBetween”でスライド間の間隔を設定できます。
ブレイクポイントを設定してそれぞれに応じてスライド枚数などを設定できます。


var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

paginationの設定例

”type”には”bullets”, “fraction”, “progressbar” , “custom”を設定でき、ページネーションの種類を選ぶことができます。
”clickable”に”true”を指定することでページネーションをクリックできるようになります。


var mySwiper = new Swiper('.swiper-container', {
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
  clickable: 'true',
  },
});

autoplayの設定例

”delay”の数値を変更することで自動スライドのスピードを変更できます。


var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
});

その他の設定

他にも設定できることがたくさんありますので、
興味のある方はhttps://swiperjs.com/api/を見てみてください。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください