Swiperとは
SwiperはJavaScriptのライブラリで、スライドショーを実装することができます。
Swiperの特徴
- jQueryに依存しない
- オプションが豊富なため、カスタムの幅が広い
- 公式ドキュメントが英語
実装方法
今回は、CDNを利用して実装しました。
以下のコードをheadタグ内に書き、cssを読み込みます。
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
次に、以下のコードをbodyタグの閉じタグ直前に書き、JavaScriptを読み込みます。
HTML
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-
bundle.min.js"></script>
</body>
次に、ベースとなるHTMLを用意します。
HTML
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
次に、CSSの設定をします。
CSS
.swiper {
width: 600px;
height: 300px;
}
最後に、JavaScriptを初期化します。
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
スライドする方向や、画像が切り替わる速度などを細かく設定することもできます。
今回は以下のように設定しました。
const swiper = new Swiper(".swiper", {
loop: true,
speed: 3000,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
loop:ループするか
speed:スライド切り替えの速度(ミリ秒)
autoplay:自動再生
delay:スライドの表示時間
disableOnInteraction:矢印のクリック後に自動再生を停止するか