トップや実績紹介、会社案内等で使われている事が多い、画像のカルーセル。ドラッグやスワイプ、もしくは自動で切り替わる画像の集合体。今回実装する機会があったのでメモとして残しておきます。ちなみにJqueryでの実装です。
読み込み
まずはSwiper.jsの読み込み部分。
Getting Started With Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
こちらを参考に、CDN版を使うか、ダウンロードしたものを読み込むかしてください。swiper-bundle.min.jsが必要です。
また、cssのlinkも必要です。こちらはswiper-bundle.min.cssを読み込む様にしてください。
<head>
...
<link rel="stylesheet" href="../css/swiper-bundle.min.css" type="text/css" media="all">
</head>
<body>
...
<script type="text/javascript" src="../js/swiper-bundle.min.js"></script>
</body>こんな感じ。
初期化処理
Swiper.jsは初期化処理が必要です。そして初期化の際に各項目値を設定することで、機能をカスタマイズする事ができます。
<script type="text/javascript" src="../js/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
breakpoints: {
768: {
slidesPerView: 2,
},
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
</script>loopにtrueを設定することで、無限カルーセルな状態になります。slidesPerViewは初期値が1、コンテナのwidthが768を超えた場合は2となっています。横幅768を基準に、画像表示数を切り替えることができるのです。また、paginationで下側にある「点」を定義し、navigationで画像を切り替える左右のボタンを表示しています。
コンテンツの表示
次は実際に表示したい箇所にタグを配置していきましょう。
<div class="swiper-container">
<div class="swiper-wrapper slick-slide">
<div class="swiper-slide"><img src="../img/SAMPLE.png" alt=""></div>
<div class="swiper-slide"><img src="../img/SAMPLE2.png" alt=""></div>
</div>
<div class="swiper-button-prev swiper-button-white" style="margin: 20px;"></div>
<div class="swiper-button-next swiper-button-white" style="margin: 20px;"></div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-black"></div>
</div>こんな感じです。classにて各パーツを指定しています。また、色などの表示に関する部分はswiper-button-whiteのように、classで指定します。まずはこれで見た目を確認してみましょう。
こんな感じ。簡単ですね！
まとめ
あとは画像を追加したり微調整を行ったりするだけで完成です。ぜひ使ってみてください。
