2019年9月5日

2019年9月5日

    Swiperの導入方法、使い方

    mig

    エンジニア mig

    • このエントリーをはてなブックマークに追加
    Swiperの導入方法、使い方

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

    今回は、そんな中でも特に多くのサイトで利用されているカルーセルスライダーの一つ「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>
    

     

    この記事に
    「ええね!」する

    1 12
    • このエントリーをはてなブックマークに追加

    名古屋を拠点としたWeb制作会社、株式会社テラ
    TERAの優れたコンサルティング、デザイン
    ネットワークを駆使し
    お客様の抱える問題を即時解決いたします

    TERAについてもっと詳しく

    過去1カ月の人気記事