[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper

サイト構築 -JavaScript

Post on:2015年3月2日

Swiperの特徴

ライブラリに依存しない: Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。; jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。
タッチの動きをそのまま: デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。
豊富なオプション: ページネーション・ナビゲーションボタン・パララックスエフェクトなど簡単に加えることができます。
マルチスライドレイアウト: カラムごとに複数のスライドを備えるマルチスライドに対応。
トランジションエフェクト: フェード・3Dキューブ・3Dカバーフローなど通常のスライドと異なるエフェクトを備えています。
2wayコントール: 同時にコントールできる2wayコントロールに対応。
フルナビゲーションコントール: スワイプの他に、ページネーション・ナビゲーションアロー・スクロールバーなど。
アクセシブルなナビゲーション: ナビーション操作は他にも、キーボードやマウスのホイールにも対応。
Flexboxレイアウト: スライドのレイアウトにはFlexboxを使用。
フレキシブルなレイアウトのグリッド: スライダーはビューごと、カラムごと、グループごと、スペースごとにコントロールできます。
RTLのサポート: RTL（Right-to-Left）のレイアウトに対応。

Swiperのデモ

デモはタッチデバイスのスマホ・タブレットがベストですが、デスクトップブラウザのホイール・ドラッグ操作にも対応しています。

iPhone, iPadで試してみましたが、すいすいスワイプでき、非常に快適でした。

Swiperのデモ

デモは通常のパネルをスライドするだけでなく、入れ子のスライダーも実装されています。

スライダーの動きをGIFアニメーションにしてみました。

デモのアニメーション

デモページでは、他にも数多くのデモがあります。

デモページ

デモページ：フルスクリーン水平・フルスクリーン垂直

デモページ：スペース有り・カルーセル

デモページ：マルチロウ・ネスト

デモページ：さまざまなエフェクト

デモページ：キーボード操作・ホイール操作

Swiperの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

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

jQueryやZeptoのプラグインとして利用することもできます。

  <script src="path/to/jquery.js"></script>
  <script src="path/to/swiper.jquery.min.js"></script>

Step 2: HTML

各スライドはdiv要素で配置し、ページネーション・ナビゲーションボタン・スクロールバーなどは必要に応じて配置します。

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

Step 3: CSS

スタイルシートではスライダー全体のサイズを指定します。

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

Step 4: JavaScript

スライダーを内包する要素を指定し、スクリプトを実行します。

  <script>        
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
    
    // If we need pagination
    pagination: '.swiper-pagination',
    
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })        
  </script>