swiperを利用したスライダー・カルーセルの作り方【jQuery不要】

slide HTMLコーダー

前回【HTML&CSS&jQuery】スライダー・カルーセルの作り方でjQueryを利用したスライダー・カルーセルをご紹介しましたが、他にもswiperというライブラリを利用した事例が多かった為、そちらの利用方法も紹介させて頂きます。

今回作るのは以下のようなスライダーです。
swiper

画像の準備

それっぽい画像を利用した方がそれっぽく見えるので、unsplash.comなどの無料画像サイトで適当なテーマに絞って画像を3枚用意してください。

unsplash.comは検索が英語の為、今回この記事で利用している画像はanimalで検索した画像から適当に選んだものになります。

tiger
wolf
fox

swiperの準備

swiperというライブラリを利用します。まずは以下のページよりダウンロードします。

https://github.com/nolimits4web/swiper

ダウンロードしたzipを解凍し、swiper-master/dist/jsフォルダの中にあるswiper.min.jsをコピーして利用します。

cssファイルも持ってくる必要があります。swiper-master/dist/cssフォルダの中にあるswiper.min.cssを同じように持ってきましょう。

それらのファイルの設置が終わったらheadタグ内で読み込みます。

HTML

<head>
    <meta http-equiv="content-type" charset="utf-8">
    <title>テスト</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="swiper.min.css">
    <script type="text/javascript" src="swiper.min.js"></script>
</head>

CDNから読み込む方法もありますが、外部からファイルを読み込むのは遅くなったり外部サイトの不具合時に影響を受ける為、個人的にはあまり使わないです。

スライダーの作成

準備は整ったので、基本的な機能はすべて備えたシンプルなスライダーを作成してみます。

HTML

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide1"></div>
            <div class="swiper-slide slide2"></div>
            <div class="swiper-slide slide3"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
    effect: "slide",
    loop: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    autoplay: {
        delay: 2000,
    },
})
</script>
</body>

CSS

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

.slide1 {
    background-image: url(tiger.jpg);
}

.slide2 {
    background-image: url(wolf.jpg);
}

.slide3 {
    background-image: url(fox.jpg);
}

これで以下の様なスライダーが出来上がります。
swiper

解説

swiper-container、swiper-wrapper、swiper-slideの部分は決まりの形になります。

swiper-slideはスライドする要素の数だけ設置、それぞれ個別のスタイル設定は上記の例ではslide1,2,3といった個別のクラス名をつけて実装していますが、名前は何でもOKです。

追加で以下の要素は必要であればそのまま、必要なければそのdivを削除してください。

swiper-pagination：ページネーション（下中央の何ページあるかの丸部分）
swiper-button-prev：左端の戻る矢印
swiper-button-next：右端の進む矢印

JavaScriptも基本そのままで動きますが、可変で設定できる値としては以下のようなものがあります。

effect: “slide”→slide以外にflip、cubeなどが指定可能です
loop: true→最後まで行って最初に戻るループが必要なければ削除
autoplay→delay: 2000で2秒ごとに自動的に次のスライドへ、必要なければ削除、もっと遅くしたければ4000（4秒）等を指定

CSSではswiper-containerにスライダーの幅と高さを指定しています。そして各スライダー（.slider1-3）に個別の画像を指定している形になります。

実用するには

実際にサイトを作成する際は色々な要望があると思いますので、可能かどうかは以下公式サイトのAPIを探して判断すると良いかと思います。

https://idangero.us/swiper/api/

ただ実務では上記のような基本のスライダーだけでほぼ事足りるのではないかなと思います。

一点、ポートフォリオサイトに使えそうだなぁと思ったパターンとして以下のような画像のカバーフロースライダーがあります。
swiper

まだ制作点数が多くない内は一覧で並べてしまうと数が少なくてしょぼい感が出てしまいますが、このスライダーでぐるぐる回しておけば何となくごまかせそうな予感です。

基本的にはJavaScript部分の修正のみで対応可能で、上記画像のようなスライダーの指定方法が以下になります。

JavaScript

var mySwiper = new Swiper ('.swiper-container', {
    effect: 'coverflow',
    slidesPerView: 2,
    centeredSlides: true,
    loop: true,
    coverflowEffect: {
        slideShadows: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
})

slidesPerViewをスライド数と同じ3にすることで均等分割の表示にもできます。

centeredSlidesをtrueにしておかないと、選択されたスライドが左端になるので注意です。

まだまだオプションで色々指定できることがあるので、実現できることの幅は広そうです。

公式サイトは英語ですが、そこまで難しい英語ではないのでお時間のある時にでも覗いてみるといいと思います。