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>