2019年9月5日

Swiperの導入方法、使い方

エンジニア mig

サイトをリッチに見せるための方法は多くあります。
スクロールした際に要素が次々浮かび上がってくるモノ、スクロールの流量に遅れてスクロールする視差効果（パララックス）、メインビジュアルをスクロールして表示するもの（カルーセルスライダー）等、様々です。

今回は、そんな中でも特に多くのサイトで利用されているカルーセルスライダーの一つ「Swiper」について、実装の方法をご紹介します。

①ますはswiperのcssとjsを持ってくる

Swiperのデータ一式を下記公式GitHub

https://github.com/nolimits4web/swiper/releases

もしくは公式から奨励されているCDNJSから取得します

https://cdnjs.com/libraries/Swiper

cssとjsを格納する場所はdocument rootに対し、以下の通りとします

CSS：/assets/css/vendor/

js：/assets/js/vendor/

②<head>内でcssを読みこむ

<link rel="stylesheet" href="/assets/css/vendor/swiper.min.css">

③</body>上のjsエリアでjsを読み込む

<script src="/assets/js/vendor/swiper.min.js"></script>

④</body>上のjsエリアでコントロール用のjsを記載する

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 'auto',
        autoplay: 2000,
        centeredSlides: true,
        paginationClickable: true,
		loop: true
    });

</script>

⑤htmlを記載（例）

 <div class="swiper-container swiper-container-horizontal swiper-container-free-mode">
   <ul class="swiper-wrapper">
    <li class="swiper-slide">
	<a href="/dummy"><img src="/images/p_pickup-01.jpg" height="auto" alt="例">
    </li>
    <li class="swiper-slide">
	<a href="/dummy"><img src="/images/p_pickup-02.jpg" height="auto" alt="例">
    </li>
   </ul>
</div>