株式会社テラ

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 11
  • このエントリーをはてなブックマークに追加

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

TERAについてもっと詳しく

過去1カ月の人気記事