スライダーJavaScript「Swiper」で簡単スマホ対応!軽量/レスポンシブ/スワイプ

レスポンシブ・ウェブデザインを採用するにあたって、画像のスライダーをどうするか懸念するケースがあるかと思います。
そんな時はjQuery依存しない「Swiper」を選択肢に入れるのが賢明かもしれません。

sponsors

使用方法

Swiperからファイル一式をダウンロード。

<link rel="stylesheet" href="swiper.min.css">
    <script src="swiper.min.js"></script>
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
    </script>
上記のように記述します。
jsはスライダー本体より、下に記載してください。
あとは下記のようにするだけで簡単に実現できます。

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
また様々なオプションがあります。
スライドを縦方向にする「direction: 'vertical'」
1ページあたりのスライド枚数を設定する「slidesPerView: 3」
中央からスライドを始める「centeredSlides: true」
多様なエフェクト「effect: 'cube'」。その他fade、coverflow
demosフォルダを見ながら自分にあったスライダーを採用してみてください。

サンプル

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

Javascriptサンプルページ一覧
skuare.net

sponsors