初めに
サイトによってはスライダー表示のコンテンツが運用していくなかで増えたり減ったりすることも考慮する必要がでてくると思います。
そんな時にSwiperを使用して、表示数よりも記事数が多い場合はスライダー表示をして、そうでない場合はスライダーを表示しない実装を紹介します。
バージョン
| ライブラリ | バージョン |
|---|---|
| Swiper | 4.5.0 |
| jQuery | 3.3.1 |
Swiperとは
SwiperはjQueryに依存しないスライダー実装ライブラリで、レスポンシブ対応、スマホ対応、画像遅延読み込み、複数行のスライドレイアウト、などなどリッチなスライダーを簡単に実装することができます。
公式サイト：https://swiperjs.com/
手順
HTML、CSSの実装
公式のドキュメントを参考に、必要な要素を記述します。
今回はスライドのコンテンツの他に、ページネーションとスライドを動かすためのボタンを記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
<link rel="stylesheet" href="css/common.css">
<script src="lib/jquery/jquery-3.3.1.min.js"></script>
<script src="lib/swiper/js/swiper.min.js"></script>
<script src="js/script.js"></script>
<style>
.slider.swiper-container {
margin: 0 auto;
width: 980px;
}
.slider .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #FFF1EA;
color: #555;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container slider">
<!-- 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 class="swiper-slide">Slide 4</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>
</div>
</body>
</html>
JSの実装
jsではswiperの設定を記述します。
$(window).on('load', function() {
slider();
});
function slider() {
var sliderSelector = '.slider'; // スライダーのコンテナーとなる要素のセレクタ
var slidesPerView = 3; // スライド表示数
var $slide = $(sliderSelector + ' .swiper-slide');
var slidable = $slide.length > slidesPerView;
var containerModifierClass = slidable ? 'is-active swiper-container-' : 'swiper-container-'; // スライドがアクティブな場合は、コンテナー要素にクラス名「is-active」を設定
// スライド数が足りない場合はloop: false, watchOverflow: true でスライド無効に設定
new Swiper('.slider.swiper-container', {
containerModifierClass: containerModifierClass,
speed: 400,
spaceBetween: 40,
slidesPerView: slidesPerView,
loop: slidable,
pagination: {
el: '.slider .swiper-pagination',
type: 'bullets',
clickable: true,
},
navigation: {
nextEl: '.slider .swiper-button-next',
prevEl: '.slider .swiper-button-prev',
},
watchOverflow: true,
})
}
オプションを設定
swiperにはwatchOverflowというオプションが用意されていて、
有効にするとスワイプが無効になり、スライドするスライドが足りない場合はナビゲーションボタンが非表示になるというオプションです。
本来ならばこのオプションを設定すればスライド数に応じたスライダーの実行が可能になるのですが、loopオプションと併用することによりこのオプションが無効になってします。
なのでスライダーをループさせたい場合は、スライド数が足りない時はloopオプションにfalseを設定して、スライド数が表示数より多い時はtrueを設定するようにします。
containerModifierClassはswiperが実行されたときにコンテナー要素に追記されるクラス名を変更するオプションでデフォルトでは 'swiper-container-'が設定されています。
実際に付与されるクラス名はswiper-container-initialized swiper-container-horizontalのようになります。
swiperが用意しているcssはこのデフォルトのクラス名に対してデフォルトのスタイルを適用しているので、基本的に変更する必要はないのですが、
今回はスライダーの有効・無効を判断してスライダーの子要素のスタイルを変えたい場合を考慮して、スライダーが有効な場合は'is-active swiper-container-'を設定しています。
これにより、下記のようにスライダーがアクティブの場合はスタイルを適用できるようになります。
.slider.is-active .swiper-slide {
...
}
終わりに
説明は以上になります。間違えていることや、こうしたほうがいい等ありましたらコメントお願いします。