【Swiper】スクロールバーにドラッグできるボタン付きのスライダーを作る
つい先日、Swiperで少し変わった実装をする機会があったので、備忘録として掲載しておきます。
今回はスクロールバーにドラッグできるボタンが付いたスライダーのご紹介します。
スクロールバーにボタンをつける機能はSwiperの標準機能としてあるので、特に難しいことをしているわけではないのですが、実際にググってみても意外とピンポイントの記事がなかったのでご紹介します。
完成イメージ
まずは実際に完成したスライダーは下記になります。
See the Pen ドラックできるボタン付きのSwiper by hassy (@hassy-web) on CodePen.
スクロールバーにドラック可能なボタンが付いていて、ボタンをドラッグするとスライダーを操作できるようになっています。
コード解説
いつも通り、Swiper本体のCSSとJSは事前に読み込んでくださいね。
上記の完成イメージは現時点で最新版のSwiper V10を使用しています。（2023/09/09時点）
最新のSwiperは以下から取得してください。
HTML
HTMLはスライダー本体はいつものSwiperスライダーと変わらないです。
いつもと違うのはスクロールバーのための要素を追加している点です。
スクロールバーの中にスクロールボタン用の要素は記述しなくて大丈夫です。後述のJSを記述すると自動的にスクロールボタンの要素が生成されて挿入されます。
<div class="wrap">
<div class="slider swiper">
<ul class="slider__list swiper-wrapper">
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=1tk5gUYCd0RN41eY3LZMb-rAfmp9Pt_6z" alt="">
</figure>
</li>
<!-- /.slider__item -->
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=16LTQRzUEB-1nCABFxaynyq3EVLWe6W18" alt="">
</figure>
</li>
<!-- /.slider__item -->
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=1g9b772dWx7cCRfXmpFcDWej-dZxNUU_H" alt="">
</figure>
</li>
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=1tk5gUYCd0RN41eY3LZMb-rAfmp9Pt_6z" alt="">
</figure>
</li>
<!-- /.slider__item -->
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=16LTQRzUEB-1nCABFxaynyq3EVLWe6W18" alt="">
</figure>
</li>
<!-- /.slider__item -->
<li class="slider__item swiper-slide">
<figure class="slider__img">
<img src="https://drive.google.com/uc?export=view&id=1g9b772dWx7cCRfXmpFcDWej-dZxNUU_H" alt="">
</figure>
</li>
<!-- /.slider__item -->
</ul>
<!-- /.slider__list -->
</div>
<!-- /.slider-->
// スクロールバー用のHTML
<div class="slider__scrollbar"></div>
<!-- /.slider-scrollbar -->
</div>
<!-- /.wrap -->CSS
ポイントはスクロールバーのバー本体のCSSは「.slider__scrollbar」に直接ではなく、疑似要素で表現しているところです。
「.slider__scrollbar」の高さはボタンの高さと同じとなってしまうので、そのままだと太すぎるバーになってしまうので、あえて疑似要素を使って高さを指定しつつ、position: absolute;で絶対配置することで中央に配置しています。
疑似要素を使わない場合は「.slider__scrollbar」の背景をlinear-gradient()などでうまく調整してもいいと思うのですが、めんどくさいので疑似要素を使った方がシンプルで分かりやすいかと思います。
/* リセット用 */
figure {
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
/* カスタマイズ */
.wrap {
margin-inline: auto;
max-width: 900px;
}
.slider__item {
height: auto;
}
.slider__img {
height: 100%;
}
.slider__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
// スクロールバー用のCSS
.slider__scrollbar {
margin-top: 16px;
width: 100%;
height: 100%;
position: relative;
}
// スクロールバーのバー本体
.slider__scrollbar::before {
content: "";
display: block;
width: 100%;
height: 8px;
background-color: rgba(0, 0 , 0, 0.15);
border-radius: 8px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
// スクロールバーのボタン
.slider__btn {
aspect-ratio: 1/1;
background-color: #fff;
border: 5px solid #294677;
border-radius: 50%;
box-shadow: 0 0 8px 8px rgba(0, 0 , 0 , 0.0);
cursor: pointer;
}JS
ポイントはscrollbar: {}の中の指定です。
elはHTML側のクラスを変えた場合は適宜変更してください。
dragClassを指定した場合は指定したクラス名のボタンが自動的にスクロールバーの中に挿入されます。
var slider = new Swiper ('.slider', {
slidesPerView: 1.5,
spaceBetween: 16,
speed: 1000,
scrollbar: {
el: '.slider__scrollbar', // スクロールバーとして認識させるクラス
draggable: true, // ドラッグ操作を可能にする
dragSize: 8, // ドラッグ用ボタンのサイズ指定(px)
snapOnRelease: false, // スクロールバーを離したときにスライダーの位置を固定しないようにする
dragClass: 'slider__btn', // ドラッグ用のボタンのクラスを指定
},
breakpoints: {
1024: {
slidesPerView: 3.8,
spaceBetween: 25,
scrollbar: {
dragSize: 12,
}
},
}
});まとめ
いかがでしょうか？
これでスクロールバーにボタンが付いたスライダーが完成したかと思います！
実装方法がうまくいかないなど、ご質問などはお問い合わせかXのDMまでいただければ回答します！
前の投稿へ
Contact - お問い合わせ
お問い合わせはこちら
お仕事のご依頼、サイト制作に関するご相談、
こんなこと一緒にやってみない？というお誘いなど
まずはお気軽にお問い合わせください。
