jQuery

スライダー系プラグインSwiperを使ってカルーセルを実装する

30DAYSトライアル2ndもついに終盤。jQueryを使ってサイトに動きをつけていく作業に入りました。

今回は、カルーセルを実装していきたいと思います。

 

http://keibloglife.com/2019/06/13/jquery-carousel-plug-in/

 

以前に使ったのは、bxsliderというプラグインでしたが、今回はSwiperというプラグインを使ってみます。

 

HTMLとCSSばかり触っていたので、javascriptやjQueryのことを忘れがち、、。

という方は、Progateから復習した方がいいかもしれません。

 

Progateの復習内容

  • Javascript Ⅰ
  • Javascript Ⅱ
  • Javascript Ⅲ
  • jQuery 初級
  • jQuery 中級
  • jQuery 上級

 

jQueryプラグイン「Swiper」でカルーセルを実装

swiperを使ったカルーセルの完成版はこんな感じです。

 

 

jQueryプラグインを使って動きを実装する方法としては、bxsliderを使ってカルーセルを実装した記事にも書いていますが、改めて説明しておきます。

 

 jQueryプラグインを使う手順

  1. jQuery本体を読み込む
  2. jQueryプラグインを読み込む
  3. (CSSを読み込む)
  4. プラグインを適用するためのHTMLを書く
  5. プラグインを起動するためのjavascriptを書く

③はプラグインによっては無かったりするみたいです。

 

1.jQuery本体を読み込む

方法としては2通りありまして、使えるのなら②でオッケーかと思います。

  1. jQueryファイルをダウンロードして使用する
  2. jQueryファイルを読み込んで使用する(CDN)

 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>



CDNを読み込む場合は、上記のコードを</body>タグの直前に入れておきましょう。

これで、jQueryが使えるようになります。

 

※補足:

後から気づいたのですが、SwiperはjQueryに依存しないプラグインなので、jQueryを読み込まなくても使えるっぽいです。

 

2.jQueryプラグインを読み込む(CSSを読み込む)

次に、プラグインの読み込みです。

おそらく、プラグインによって方法は違うとは思います。ダウンロードだけのものや、CDNだけのものもあるみたいですし、基本はjQueryを読み込む方法と同じと考えて良さそうです。

 

 Swiperを読み込みに必要なもの

  • dist/css/swiper.css
  • dist/js/swiper.js

このファイルをSwiper公式サイトからダウンロードします。

 

swiperのダウンロード

公式サイトのトップページにある、Downroadをクリック

swiperのダウンロード

最新バージョンのzipファイルをダウンロードします。

 

中から、swiper.cssとswiper.jsを見つけて、それを作業フォルダに移動します。

<link rel="stylesheet" href="dist/css/swiper.css">
<script src="dist/js/swiper.js"></script>

 

swiper.cssは<head>内

swiper.jsは</body>の手前に記載します。

 

4.プラグインを適用するためのHTMLを書く

Swiperを使うためには、適用するためのHTMLを書かなくてはいけません。

それも、公式サイトに記述がありますので、確認しておきましょう。

 

swiper

トップページのGet Sartedを開きます。

 

swiperのhtml

3の項目に、HTMLの記述があり、この記述をしないとSwiperでカルーセルが作れません。早速コピーしましょう。

<!-- 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>
  
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>



swiper-slideのdivタグの中に、カルーセル表示したい画像を入れればオッケーです。

 

5.プラグインを起動するためのjavascriptを書く

javascriptを記述しないと、動かないので忘れないように。

 

<script src="dist/js/swiper.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev', 
    } 
  }); 
</script>


</body>タグの直前に、swiperの起動スクリプトを書きます。

 

スピードやアニメーションなど、オプションを追加したい場合は、このスクリプトタグの中に追加していきます。

 

オプションの一覧は公式サイトのAPIを確認してください。

 

 参考記事