【jQuery無し】Swiperでスライダー設置に挑戦してみる【簡単設置スライダー】

javascript

「ホームページにスライダーを設置して欲しいんだけどさぁ」

という依頼がありまして。最近ではjQueryを使わずに（脱jQuery）という流れもあるので、そっち方面からスライダーの設置に便利なものがないだろうかと物色してみると…

【Swiper】なるものを発見。

まあ、見つけたのは結構前だったりするんですが、いつか役立つだろうとチェックしておいた次第。レスポンシブ対応で軽量っていうのも魅力的なんですよね。

そうして最近日の目をみることとなったので、忘備録がてらに残しておこうと思ったわけです。

スポンサーリンク

Swiperの準備

Swiper(http://idangero.us/swiper/)

上記のページにて「Download」をクリックしてください。

※現時点ではSwiper-3.4.2となっています

中身はたぶんgitの中身そのままかなと思いますので必要なものを取り出しておきましょう。いずれも解凍した中身のdistにある

  • jsフォルダ → swiper.js（もしくはswiper.min.js）
  • cssフォルダ → swiper.css（もしくはswiper.min.css）

以上のふたつをそれぞれJavaScript・スタイルシートのあるフォルダにコピペしておきましょう。準備はこれでOK。

実際に動くようにしてみる

では、さっそく試してみたいと思います。先に下記にファイル名とコードを載せておきますのでコピペ～保存して、試してみてくださいね。

【index.html】

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>swiperJS</title>
        <link rel="stylesheet" href="css/swiper.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <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 class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

        <script src="js/swiper.js"></script>
        <script src="js/slideSetting.js"></script>
    </body>
</html>

【slideSetting.js】

var mySwiper = new Swiper ('.swiper-container', {
    effect: 'slide',
    direction: 'horizontal',
    loop: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 1000,
    speed: 4000,
    simulateTouch: true,
    slidePerView: 3,
    spaceBetween: 10,
    centeredSlides: true,
});

【style.css】

.swiper-container {
    width: 750px;
    height: 250px;
    margin: 0 auto;
}

.swiper-slide {
    text-align: center;
    line-height: 250px;
}

適当に解説してみる

こちらでセッティング（調整する）Style.cssとslideSetting.jsを忘れずに用意してくださいね（上記のコードをテキストエディタなどに貼り付けて、それぞれcssフォルダ、jsフォルダに保存しておきます）。

まずはhtmlから解説～。head部分にて準備したスタイルシートの適用（linkタグ）、bodyの閉じるタグ手前でJavaScriptの読み込み（scriptタグ）を用意。

スライダー部分は以下のようになってますね。

<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 class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

スライドさせたい（ここでいうところのslide 1やslide 2の）部分をdivタグ・クラス名「swipe-slide」でくくってます。

さらにスライドさせたい要素をクラス名「swiper-wrapper」でまとめて、次にスライド部分に付けたいいオプションを用意します。ここでは

  • ページネーション
  • スライドの巻き戻しボタン
  • スライドの先送りボタン

以上の３つを設置しました。それぞれ

  • <div class=”swiper-pagination”></div>
  • <div class=”swiper-button-prev”></div>
  • <div class=”swiper-button-next”></div>

がそれに該当します。設置したいすべての要素が用意できたら最後にそれをクラス名「swiper-container」でつつみます。

※それぞれのクラス名はSwiperのJavaScriptおよびcssファイルによって作用するので間違えないようにしましょう。

 

次はslideSetting.js

中身はスライダーのタイプ、横向きにスライドするのか縦向きなのか、ループさせるか否かなど、スライダーに関するセッティングをしています（詳しくはSwiperの公式サイトにあるAPI部分にも説明がありますのでご参考までに、英語なのでちょっぴり敷居が高いですが…）。

 

  • var mySwiper = new Swiper (‘.swiper-container’, { セッティングを書き込む }

JavaScriptの説明は割愛しますが、よくわからないって方は“上の１文にてSwiperの機能を使ってクラス名「swiper-container」のスライダー部分の設定をします”ってことだと思ってください。

 

  • effect: ‘flip’,

effectはスライドの種類を設定します。ここではフリップ（パネルが回転するような動きをする）を選んでます。種類は

slide…いわゆるノーマルなスライドタイプ
fade…次のスライドにじわじわ（フェイドしながら）入れ替わる
cube…四角い立体のようなエフェクトでスライド
coverflow…いわゆるmacのアルバムアートっぽいスライド方式
flip…パネルが回転するようなタイプ

の5種類あります。これに横回転、縦回転、パララックス、全画面でのスライドも出来るので使い方次第で様々なスライドアクションに対応できるはずです。

 

  • direction: ‘horizontal’,

スライド方向の設定になります。横タイプならhorizontal（もしくはこの項目自体を省略してもOK）、縦タイプならvertical（ただし、対応していないスライドタイプもあるので注意）。

 

  • loop: true,

スライドをループさせるかさせないかの設定。trueでループ、falseでループ禁止に。

 

  • pagination: ‘.swiper-pagination’,
  • nextButton: ‘.swiper-button-next’,
  • prevButton: ‘.swiper-button-prev’,

それぞれページネーション、NEXTボタン、PREVボタンとクラス名とのつなぎ込み

 

  • autoplay: 1000,

自動スライドの時間設定（ミリ秒単位なので、1000で1秒の計算になります）。自動スライドをしたくない場合は、この項目自体を省略することで設定できます。

 

  • speed: 4000,

スライドの移動速度設定（こちらもミリ秒単位）。数字を少なくすると高速になりますが、動きが荒くみえちゃうのでゆっくり目が吉。

 

  • simulateTouch: true,

マウスのクリック～ドラッグでスライドを動かせるようにしています。true、falseで設定。

 

最後にStyle.cssですが、表示位置を整えているだけで特に難しいことはしていません。

スライドの幅、高さをwidth、heightで設定。センタリングをmargin: 0 auto;で。

中身のテキストをtext-align:center;で中央に、縦位置のバランスは強引にline-heightで行っています。

まとめ

実際に動かして試してみてくださいね。本当は簡単なアニメーションなどでお見せするのが一番いいのでしょうが…。

以上、簡単ではありますが「Swiperでスライダー設置に挑戦してみる」でした。そんなに難しいところは無かったかと思います。しかも軽量…これは使えると思いますよ。

ちなみに、今回はテキストのみでしたが、画像や動画でもできると思います（基本的にコンテンツをスライドさせているので、いろんなものがスライドできるはずです）。

何かの参考になれば幸いです。