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

iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。

キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK!

サイトのキャプチャ

Swiper
Swiper -GitHub

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>

top of page

©2017 coliss