スライダーならレスポンシブもスマホも使えるSwiper
Swiper
スライダーならレスポンシブもスマホのタッチも使えるJQueryが不要なSwiperを使おう。
ホームページやブログサイトにスライダー機能を使いたいってこと多いですよね。そんな時、是非お勧めなのが、Swiperというライブラリー及びプラグインです。
スライダー系プラグインといえば、slick、bxSlider、Slider Pro、FlexSlider 2などを勧めているブログなどが多々ありますが、実際に使ってみた結果、Swiperさえあれば他のスライダーは要らないというくらい便利なので、紹介していきたいと思います。
Swiper公式サイト
まずは公式サイトから見ていきましょう。公式サイトと設定ファイル（CDN）へのリンクから見ていきましょう。設定ファイルは、以下のCDNファイルを読み込むのが間違いないです。Gitからのダウンロード版ですと少し古いバージョンの場合、スライド時に不具合があります。ですので、下記リンクのCDNからCSSとJavascriptを読み込みましょう。圧縮版と非圧縮版がありますが、特に改変でもしない限りは、圧縮版の組み合わせで良いと思います。CSSはhead内で、Javascriptはhead内またはfooterで読み込みます。
非圧縮データの場合
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> |
圧縮データの場合
|
1 2 |
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> |
以下のデモページをみるとこのSwiperがいかに多くのことが出来るかがわかると思います。先に、やりたいことややれることがどれくらいあるかを把握しておくと良いかと思います。
Swiperデモページ
以下が、公式でのイニシャライズの設定です。この設定をswiper-bundle.min.jsの後から読み込むことで、Swiperが動きます。
Swiperのイニシャライズ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> const swiper = new Swiper('.swiper-container', { // パラメーターオプション direction: 'vertical', loop: true, // ページネーションを使う場合 pagination: { el: '.swiper-pagination', }, // 矢印ナビゲーションを使う場合 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // スクロールバーを使う場合 scrollbar: { el: '.swiper-scrollbar', }, }); </script> |
Swiperの必要なHTMLの書き方
そして肝心なスライダー本体。こちらはスライダーを設置する箇所に書くHTMLファイルの一例です。ページネーション、矢印ナビゲーション、スクロールバーは設置する場合のみ記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- ページネーションを使う場合 --> <div class="swiper-pagination"></div> <!-- 矢印ナビゲーションを使う場合 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スクロールバーを使う場合 --> <div class="swiper-scrollbar"></div> </div> |
以上の設定を全て記述することで、スライダーが動きます。
あとは、オプションがかなりの数ありますので、見合わせて使用していきます。
このサイトのTOPページにもこのSwiperが使用されています。
コメントを残す