swiperは相当な多機能を持つ優秀なスライドライブラリですが、今回はその中でスクロールバーが付いているケースをメモします。

ライブラリをダウンロードする

まずはライブラリをダウンロードしましょう。

ダウンロード

CDNの利用も可能です。

CDN

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

CSSを設置する

続いてCSSを設置しましょう。

HTMLのヘッダに以下を記述します。

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

併せて以下のCSSを記述します。

CSS

.swiper {
width: 90%;
height: 450px;
margin: 0.5rem auto;
}

.swiper-slide {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
font-size:30px;
}

.swiper-slide{
height:400px;
}
.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6 {
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}
.slide1 {
background-image:url(img/open1.jpg);
}

.slide2 {
background-image:url(img/open2.jpg);
}

.slide3 {
background-image:url(img/open3.jpg);
}
.slide4 {
background-image:url(img/open4.jpg);
}

.slide5 {
background-image:url(img/open5.jpg);
}
.slide6 {
background-image:url(img/open6.jpg);
}

HTMLを記述する

続いてHTMLを記述しましょう。

HTML

<div id="swiper" class="swiper">
<div class="swiper-wrapper">

<div class="swiper-slide slide1">
<p>SLIDE1</p>
</div>
<div class="swiper-slide slide2">
<p>SLIDE2</p>
</div>
<div class="swiper-slide slide3">
<p>SLIDE3</p>
</div>
<div class="swiper-slide slide4">
<p>SLIDE4</p>
</div>
<div class="swiper-slide slide5">
<p>SLIDE5</p>
</div>
<div class="swiper-slide slide6">
<p>SLIDE6</p>
</div>

</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>

slide1〜slide6までがスライドコンテンツです。

swiper-scrollbarがスクロールバーとなります。

swiper-button-prev・swiper-button-next・swiper-scrollbarを編集する場合はswiper-bundle.cssを使用します。

JavaScriptを記述する

それではJavaScriptを記述しましょう。

JS

$(function(){
const swiper01 = new Swiper("#swiper", {

loop: false,
centeredSlides: false,
slidesPerView: 3,
spaceBetween: 16,
speed: 600, 

navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev" },

scrollbar: {
el: ".swiper-scrollbar",
hide: false,
draggable: true 
}
});
});

loop〜speedまでは見慣れたパラメータですね。

navigationは矢印になります。

問題のスクロールバーは以下で設定しています。

scrollbar: {
el: ".swiper-scrollbar",
hide: false,
draggable: true 
}

とにかくswiperは本当に多機能で、今回はその一部をメモしました。

今後も別の機能をメモしたいと思います。

デモはこちら