Swiper.jsを使ってみた

シンプルに画像のスライダーを設置したかったので試しにSwiperを使ってみたときのメモ

ベースとなるhtmlはこちら
今回はCDNで利用したのでココでバージョンをチェック

設置

head内

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css">

body内

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- スライド -->
        <div class="swiper-slide"><img src="/img/img01.jpg"></div>
        <div class="swiper-slide"><img src="/img/img02.jpg"></div>
        <div class="swiper-slide"><img src="/img/img03.jpg"></div>
    </div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>

    <!-- ナビゲーションボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    slidesPerView: 2,
    spaceBetween: 10,
    centeredSlides : true,
    breakpoints: {
        767: {
            slidesPerView: 1,
            spaceBetween: 0
        }
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },
})
</script>

使用したパラメータ概要

パラメータ	初期値	説明
loop	false	trueの場合、最後のスライドまで行ったのち、次のスライドは最初のものに戻る。
slidesPerView	1	指定の枚数分が表示される。 2の場合は中央に１枚、左右に半分ずつ見切れたものが表示される。
spaceBetween	0	スライドとスライドの隙間 単位：ピクセル
centeredSlides	false	trueの場合、対象のスライドで中央寄せ falseは左寄せ
breakpoints		ディスプレイ幅で表示を切り替えるために使用する。 今回の実装では767px以下の場合 ・表示スライドを1枚 ・スライド間の隙間を0px と指定している。
navigation		「次へ」「前へ」のナビゲーションボタン表示するときに記述する。
pagination		ページネーションを表示するときに記述する。 今回はデフォルトの円だが、さらに色々なtype指定できる。

パラメータ詳細

今回は初使用だったのでほぼデフォルトの使用だったが、色々指定できるから幅広く対応できそうな予感。