jQueryに依存しない高機能スライダー「Swiper」

 

「どのスライダーライブラリを使うか」は、webデザイナーにとって宗教戦争のようなもので、私も1年ぐらいずっと悩んでました。

その戦争も終焉を迎えることになった。

そう、「Swiper」との出会いによって。

 

Swiperとは

SwiperとはjQueryに依存しない高機能レスポンシブ対応のJavaScriptライブラリだ。とてもいい感じにスライダーが作れるし、導入も楽チン。

まずはデモを見てください。

Swiperのデモを見る ※公式サイトにリンクします

 

Swiperのセットアップ方法

まずはSwiperをダウンロードするか、CDNで設定しましょう。

 

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>

※4.x.xを最新版と揃えます。

 

HTMLで組む

<!-- 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>

CSSの設定

.swiper-container {
    width: 600px;
    height: 300px;
}

 

JavaScriptの設定

<body>
  ...
  <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>
</body>

 

オプション

以下のオプションを設定できます。

オプション 初期値 設定
initialSlide 0 最初に表示するスライド(0からの連番)
direction horizontal スライドの方向(’horizontal’が横、’vertical’で縦になります。)
speed 300 スライドする際の速度1/1000秒で指定します。
autoplay スライドを自動で動かす場合のオプション。1/1000秒で間隔を指定することで自動でスライドします。
loop false
スライドをloopさせるかどうか
paginationClickable
false ページネーションをクリックした時スライドさせるかどうか
simulateTouch true マウス操作でスライドさせるか
parallax false trueにすることでparallax(視差効果)を実装できます。

 

ぜひ使ってみてくだされー

 

Swiper

 

文字数:2369, 執筆時間:15分

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です