Swiperの基本な使い方

更新：2022-01-27

Swiperはslickのようなスライダー（カルーセル）。動作に最低限必要なファイルは、swiper-bundle.min.css と swiper-bundle.min.js のみで、jQueryは不要。個人的には数あるスライダーの中で一番のお気に入り。

ここでは企業サイトのトップページにあるような横幅いっぱいに表示されるSwiperのサンプルコードを記す。

まず、事前準備として上述の2つのファイルを自分のサイトに合わせてパスを指定する。

使用するSwiperのバージョンは7.4.1。バージョンによって動作や設定が多少異なる場合がある。

CSS

<link rel="stylesheet" href="swiper/swiper-bundle.min.css">

JavaScript

<script type="text/javascript" src="swiper/swiper-bundle.min.js"></script>

HTML

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image_01.jpg"></div>
<div class="swiper-slide"><img src="image_02.jpg"></div>
<div class="swiper-slide"><img src="image_03.jpg"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>

この例では画像を3枚スライドさせる。もし画像に合わせて特定のページへリンクを張りたい場合は、それぞれAタグで囲むとよい。

基本設定

Swiper公式サイトにあるDEMOの「Autoplay」を参考にするとよい。適宜自分のサイトに合わせて改造する。

まず、CSS。

width:100% で横幅いっぱいに表示。 height:min(50vw, 450px) で画面の横幅に合わせて高さを可変（レスポンシブ）にしている。

デフォルトの状態でほぼ満足のいく状態になっている。

<style>
.swiper-slide {
   text-align: center;
   background: #fff;
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}

.swiper {height:min(50vw, 450px);}

.swiper-slide img {
   display:block;
   width:100%;
   height:100%;
   object-fit:cover;
}
</style>

スライダー下部に表示される●ナビゲーション（ページネーション）の表示位置を外側に出したい場合は、対象のHTML要素を以下のように単に外側に出す。

（上略）
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-pagination"></div>

さらにCSSに以下のように追加する。

.swiper-pagination {position:relative;margin:20px 0 0 0;}

デフォルトはpositionがabsoluteになっている。

Swiperで使われているCSS（class名）を知りたい場合は、ブラウザの開発ツールを活用するとよい。

次にJavaScript。

loop:true にするとスライドの最右端にも右矢印が表示されるようになり、そのまま先頭へループするようになる。デフォルトの設定はfalseで、矢印が無効になっており、左側へスライドして先頭へ戻るようになっている。

autoplayのdelayは再生スピード。この例では3秒（3000ミリ秒）を指定している。

ここではコメントアウトしているが、スライドの隣の画像が見えるようにするにはslidesPerViewを指定する。値を1にすると1枚。 2にするとセンターに1枚と両サイドに半分ずつ。 3にすると3枚といった具合になる。 1.2のように小数を指定することもでき、両端の画像がその割合分見えるようになる。両端が少しだけ見えているようにしたい場合は、1以上2未満の小数値を指定するとよい。

隣り合う画像間のスペース（マージン）はspaceBetweenで変更できる。指定しない場合は0（ゼロ）。

<script>
var swiper = new Swiper(".mySwiper", {
    centeredSlides: true,
    //spaceBetween: 30,
    //slidesPerView:1.2,
    loop: true,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});
</script>

Swiperの基本な使い方

基本設定

カテゴリ