Swiperでスライダー
jQuery無しで動くスライダーのプラグイン「Swiper」を入れてみました。導入方法はとても簡単で、cssとjsをダウンロードして読み込むだけ（またはCDNで読み込む）。横にスライドしていくスライダーや、サムネイル付きのスライダーなど色んな種類のスライダーが入っているので使い勝手はいいかなと思います。
Swiper のダウンロード
公式サイトへ行く：http://idangero.us/swiper/
ダウンロードする：https://github.com/nolimits4web/swiper/releases
ちなみに、CDNも用意されているようですね。
CDNの方がお手軽ですが、ここはあえてダウンロードしたいと思います。
案件でCDNはあまりつかはないので 。。。
Swiper 読み込み
ダウンロードしたファイルの中で使用するもの
- swiper-4.3.3/dist/js/swiper.min.js
- swiper-4.3.3/dist/css/swiper.min.css
リンクの設置方法は「公式サイト：Swiper | Getting Started With Swiper」に書いてありました。
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>head内にCSS、bodyタグの終了直前にJSファイルを読み込みます。
ソースコード
HTML
<div style="margin:50px 0 0">
<div class="swiper-container js-swiper-slider">
<div class="swiper-container js-swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_01.jpg);"></div>
<div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_02.jpg);"></div>
<div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_03.jpg);"></div>
<div class="swiper-slide" style="background-image:url(https://rachicom.net/themes/rachicom2018/contents/demo/swiper/images/avocado/avo_04.jpg);"></div>
</div>
<!-- Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Pagination -->
<div class="swiper-pagination js-swiper-top-pagenation"></div>
</div>
</div>
</div>SCSS
/* 画像のスタイル調整 */
.swiper-slide {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* スライダーのスタイル調整 */
.swiper-container {
max-width: 600px;
height: 400px;
margin: 0 auto;
}JS
const avoSwiper = new Swiper('.js-swiper-slider', {
loop: true, //スライドの繰り返し
autoplay: { //自動再生
delay: 5000, //5000ミリ秒毎
disableOnInteraction: false, //ユーザーがスワイプしても自動再生を続ける
},
pagination: { // ページネイション
el: '.js-swiper-top-pagenation', //セレクタ指定
clickable: true, //ページネイションのクリック操作有効
},
navigation: {
nextEl: '.swiper-button-next', //次へボタンのセレクタ指定
prevEl: '.swiper-button-prev', //前へボタンのセレクタ指定
},
});Swiper はとにかくオプションがたくさんあります！APIのページに様々なオプションが載っているので、興味のある方は覗いてみると欲しかった機能が見つかるかもしれません。
Swiper API：http://idangero.us/swiper/api/
Demo
https://rachicom.net/contents/demo/swiper/swiper.html
参考URL
swiper.js使ってみたからそのオプションについて(v4.1.6) | なんかいろいろデザインする人
基本的な実装方法については、このサイトがわかりやすかったです。
