ブログ

スライダーSwiper.js 基本の使い方解説

こんにちは、コーダーのN.Sです。

今回はよく使われるスライダーライブラリー Swiper.jsの紹介です！スライダーのライブラリーといえば、これって感じでよく使われてます。

この記事の目次
  1. Swiper.jsとは
  2. Swiperの基本的な使い方
  3. サンプルご紹介

Swiper.jsとは

Swiper.jsとはスライダー（カルーセル）が作れるJavaScriptのライブラリです。
PCでもスマホでも使えて、レスポンシブ対応していることや、jQueryに依存しないので、重宝しています。

公式サイトはこちら
https://swiperjs.com/

Swiperの基本的な使い方

公式サイトにも書いてはあるので詳細はちょっと省きますが、Swiperの基本的な使い方をさくっと解説します！

Swiperの使うための準備

まず、CSS、JavaScriptファイルを読み込みます。
CDNと公式サイトからダウンロードしてくる方法２つあるのですが、楽をしたいならCDNがおすすめです。

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

CSSは <head></head>内に、JavaScriptは </body>直前に書きます。
ファイルをダウンロードしてきた場合は、それぞれswiper.min.cssと、swiper.min.jsのパスを書いてくださいね！

ちなみに、「min」がついていないタイプのCSSやJavaScriptファイルもありますが、「min」がついていると、余分な余白や改行が省かれ、圧縮されたものになりファイル自体も軽くなるので、特にこだわりがなければ「min」を使うことをおすすめします！

HTMLにSwiperを追加

ファイルをスライダーを設置する箇所に下記のコードを追記します。

<body>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>
</body>
<script>
  var mySwiper = new Swiper ('.swiper-container', {});
</script>

上のコードでどんなスライダーができるかというと、下のようなスライダーを簡単にスライダーを作ることができます。
ちょっとわかりづらいですが、横にスクロールしてみてください！

See the Pen swiper by cooen-s (@cooen-sn) on CodePen.

オプションも豊富

Swiperのオプションも豊富で、色々と設定ができます。
例えば、自動でスライドが切り替わったり、フェードで切り替えたり、次へ・前へのボタンを表示させたりということができます！

また、その他のサンプルについてもこちらのデモサイトに豊富に載っています！

https://swiperjs.com/demos/

サンプルご紹介

いろんなオプションを使ったサンプルをご紹介します。

■自動でスライドさせる

例えば、Autoplay, Speed, loopのオプション、値を設定すると下のようにずーっと流れるスライダーをつくることができます。

See the Pen swiper demo02 by cooen-s (@cooen-sn) on CodePen. 

  autoplay: {
    delay: 0,
  },
  loop: true,
  speed: 10000,

autoplay: { delay: 0 }　とすることで、ずーっと流れているようなスライダーをつくることができます。

■ちょっと変わったスライド

他にもオプションをちょっと追加したり、数値を変えたりすると下のような感じのスライダーもつくることができます。

See the Pen swiper demo 3 by cooen-s (@cooen-sn) on CodePen. 

  effect: 'cube',
  loop: true,
  cubeEffect: {
    slideShadows: false,
     shadowOffset: 20,
     shadowScale: 0.94,
  }

effect を cubeにすると、スライドさせる時にちょっと立体ぽく見えませんか！？

一見、難しそうに見えますが、swiperの元々のオプションを追記したりすると、こんなスライダーも作ることができます。

今後、この Swiper.jsを使った他のスライダーの作り方も紹介していきたいと思います。

発注者さまに優しい制作チームcooenへのご相談はこちら

関連記事

PAGE TOP