7
Help us understand the problem. What are the problem?

posted at

updated at

Organization

Swiperを使ってスライダーをつくる

はじめに

スライダーを作りたい!ということで、今回Swiperを使って実装しました。
基本の書き方と応用したものを、備忘録としてまとめています。

Swiperとは?

jQueryを使わず、スライダーが作れるJavaScriptのライブラリです。
ただし、バージョン5以降はIE対象外のため、IE対応させるにはバージョン4を使う必要があります。

Swiperを使うには

GitHubからファイルをダウンロード、もしくはCDNを読み込む

今回こちらのサイトからCDNで読み込んで使用しました。

基本の記述

HTML

<!-- スライダー大枠 -->
<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 class="swiper-pagination"></div>

  <!-- ナビゲーション(※使いたい場合) -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバー(※使いたい場合) -->
  <div class="swiper-scrollbar"></div>
</div>

CSS

サイズや見た目など設定する際は適宜追加します。

.swiper-container {
    max-width: 1000px;
    margin: 0 auto;
}
.swiper-slide {
    text-align: center;
}

JSでSwiperを初期化

変数swiperを初期化。
この時点でスライダーとしての形はできてる状態。

中身に使用するオプションを追加していく。(必要なオプション機能を適宜)

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',
  },
});

基本的な実装

矢印をクリックしたらスライドするのみ

See the Pen Untitled by chisato (@mgkita) on CodePen.

JSにパラメーターなどを追加することで色んな動きをつけることができます。

※「値」を記述する際はtrue・false、数字以外は""''で囲う

例)

  • loop: true:最後までいったら1枚目に戻ってループする

  • effect: 'fade' :スライドしたときにフェードしながら画像が切り替わる

  • slidesPerView: 任意の数字:仮に3を指定すると、3枚横並びで表示される

など

↓公式より

応用ver

汎用的なスライダーを作成しました。
今回は実装してませんが、もっと見るをクリックすると画像一覧のようなページにとぶイメージのスライダーです。

slider-min.gif

See the Pen Untitled by chisato (@mgkita) on CodePen.

JS

const mySwiper = new Swiper(".cat-slider", {
  spaceBetween: 50,
  width: 370,
  breakpoints: {
    767: {
      spaceBetween: 15,
      width: 290,
      slidesPerView: 1
    }
  },
  navigation: {
    nextEl: ".swiper-button-next--cat",
    prevEl: ".swiper-button-prev--cat"
  }
});

spaceBetween:画像と画像の幅を指定
width:画像自体の横幅を指定
breakpoints:767px以下の時のスタイルを指定
slidesPerView:横幅100%としたときに画像を何枚見せるか
navigation:両端の矢印を設置

JS部分はこれだけの記述で完成!

まとめ

SwiperはJSを数行書くだけで動くものができてしまうので、手早くスライダーを作成したいときに便利です。
ただ複雑なレイアウトになると難しい部分もあったので、cssを使ったスライダーなどとうまく使い分けれるようにしていきたいと思いました。

おまけ

今回使用した画像は、私の先輩のおうちのにゃんこちゃん達でした!
快く提供してくださり、スペシャルサンクスです!!

可愛すぎるので最後にもう一度貼っておきます。
皆さんもぜひ癒されてください。

slider-min.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?