[JavaScript]Swiper.jsを使って画像のカルーセルを実装する

トップや実績紹介、会社案内等で使われている事が多い、画像のカルーセル。ドラッグやスワイプ、もしくは自動で切り替わる画像の集合体。今回実装する機会があったのでメモとして残しておきます。ちなみにJqueryでの実装です。

読み込み
初期化処理
コンテンツの表示
まとめ

読み込み

まずはSwiper.jsの読み込み部分。

Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

こちらを参考に、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で指定します。まずはこれで見た目を確認してみましょう。