【jQueryでスライドショー】Swiperの使い方 スライダーが簡単, 作り方, 動かない場合など

スポンサーリンク
man

困ってる人

スライダーやスライドショーを作るのに何か使いやすいライブラリはないかなぁ?

それでしたら今回は、Swiperの使い方をご紹介致しますね

operator

オペレーター


こんにちは、ヨロと申します。

今回は、jQueryでスライダーやスライドショーを作るのに、簡単で便利なSwiperのご紹介。

スポンサーリンク

【jQueryでスライドショー】Swiperの使い方 スライダーが簡単, 作り方, 動かない場合など

まずは、Swiperのダウンロードから、

nolimits4web/swiper
Most modern mobile touch slider with hardware accelerated transitions - nolimits4web/swiper


「Clone or download」

Download ZIP

今回必要になるファイルは

・swiper.css
・swiper.js

この2点。

ファイルの保存場所、階層については、

index.html

cssフォルダ
style.css
swiper.css

sassフォルダ
style.scss

imageフォルダ
画像

jsフォルダ
swiper.js

ファイルを読み込む時は、

head内に、

<link rel="stylesheet" href="css/swiper.css">

body閉じタグの手前に、

// jQueryとswiper.jsの読み込み

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/swiper.js"></script>

今回は、正方形の色のついた画像を、5色分用意してみた。

今回作るのは、こんな感じのスライドショー。

・HTML

// HTML部分

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
            <div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
            <div class="swiper-slide"><img src="image/*****.jpg" alt="〇〇"></div>
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

これが基本形で、クラス名は変えずにそのまま使うのが便利。

style.cssは触らなくても、

HTMLを書いたのと同時に、swiper.cssを読み込んだ時点でブラウザを開けば、何かしらの表示がされるはず。

ただしこのままだと見た目の面で、一体何なのかが分かりづらいので、

スライダーの周りの枠と、サイズを適当に作る。

スライダーの全体的なサイズを決める時は、CSS(style.css)で、

// ここで全体的なサイズを決める。

.swiper-container {
  // ここに処理の内容を書いていく
}

例えばこんな感じ。

// スライダーのサイズと枠:例

.swiper-container {
  width: 500px;
  height: 300px;
  border: 4px solid black;
}

でOK。

そうすると、今の状態だとこんな感じ。

スライダーの画像の見た目を整える

今回用意した画像が単なる正方形なので、今のままだと見た目が悪い、

という事で、中の画像をスライダーの画面いっぱいに広げる、

// 中の画像をスライダーいっぱいに広げる

.swiper-container img {
	width: 100%;
	height: 100%;
}

そうすると、画像がスライダーの画面一杯に広がる。

見た目の部分に関しては、ある程度出来上がったので、

次に、普通にスライドショーとして機能させてみる。

Swiperのスライドショーとしての通常の使い方

script.jsに、jQueryを書いてスライダーとして機能させる。

// script.js

$(function() {
  let swiper = new Swiper('.swiper-container', {
      // ここに処理の内容を追加していく。
  });
});

とりあえず、まずはこう書く事によって、スライドショーの準備はOK、これが基本形。

ただし今の状態だと、まだ矢印をクリックしても何も反応が無い、

ページャーもついてないし自動でスライド処理もしないので、ここから内容を追加して、ある程度まともなものにしていく。

・矢印をクリック出来るようにするには、

// 矢印をクリック出来るように

navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},

を追加すればOK。

// 矢印をクリック出来るようにする:例

$(function() {
  let swiper = new Swiper('.swiper-container', {

      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
      
  });
});

そうすると、矢印をクリックして画像をスライドさせる事が出来るようになる。

(もし、これが出来ないとすると、ファイルの読み込み方や、どこかで何かしらの書き間違いをしている可能性がある)

そして次、

今のままだと、自分で画像を横にスライドさせないと次の画像が見れないので、画像が自動的に流れるようにする設定。

自分で画像をスライドさせなくても、自動的に画像がスライドしていくように設定する場合

autoplay: true,

を追加。

そうするとこんな感じ。

// 自動で画像をスライドさせる設定

$(function() {
  let swiper = new Swiper('.swiper-container', {

      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },

      autoplay: true,
      
  });
});

ただし、今のままだと矢印をクリックしていって、最後の画像まで到達したらクリックが出来なくなるデフォルトの設定、

なので今回は試しに、わざわざ一枚目の画像まで戻らなくても済むように、ループ処理をさせる、その場合は、

loop: true,

これを追加する事で、一番最後の画像まで行ったとしても、自動的にまた最初の画像まで繋いでくれる。

ページャーを表示させる

次は、ページャーを表示させて、今何枚目の画像を見ているのかというのを分かるようにする設定。

// ページャーを表示させる

pagination: {
  el: '.swiper-pagination',
  type: 'bullets',
},

そうすると、script.jsの中身はこんな感じ。

// script.js

$(function() {
  let swiper = new Swiper('.swiper-container', {

      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },

      autoplay: true,
      loop: true,

      pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
      },
      
  });
});

その結果、ページャーが表示されるようになる。

矢印、アイコンの設定方法

次は、矢印の大きさや、アイコンを変更してみる。

もし、CSSが反映されない場合は、

style.css側で、!importantを使って無理矢理設定を反映させるか、

swiper.cssの方を、直接書き換えちゃう。

// 矢印アイコンを変更

.swiper-button-prev { /* 矢印アイコンの設定 */
  background: url(画像のURL) no-repeat center !important;
  background-size: 25px 25px !important; /* ここでサイズ */
}

.swiper-button-next { /* 矢印アイコンの設定 */
  background: url(画像のURL) no-repeat center !important;
  background-size: 25px 25px !important; /* ここでサイズ */
}

そうすると、矢印アイコンが無事に変更されるはず。

もし何をやっても思い通り上手くいかない場合は、swiper.cssの影響が関係している可能性があるので、そっちを直接書き換えてみるのも方法の一つ。

2カラムで左右いっぱいに広げる

次は、試しに2カラムで、右側にスライダーを表示させてみる。

・HTML

// HTML

<div class="flex_box">

    <div class="column_left">左側のカラム</div>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
            <div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
            <div class="swiper-slide"><img src="image/〇〇.jpg" alt="〇〇.jpg"></div>
        </div>
    
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

</div>

・CSS

// CSS

.flex_box {
  display: flex; /* ここでカラムを横並びに */
}

.flex_box .column_left {
  width: 100%;
  border: 4px solid black;
  margin-right: auto;
}

.flex_box .swiper-container {
    max-width: 70%;
    height: 75vh;
    border: 4px solid black;
    margin: 0 !important;
  }

.flex_box .swiper-container img {
  width: 100%;
  height: 100%;
}

SCSSだと、

// SCSS

.flex_box {
    display: flex; /* ここでカラムを横並びに */
  
    .column_left {
        width: 100%;
        border: 4px solid black;
        margin-right: auto;
    }

    .swiper-container {
        max-width: 70%;
        height: 75vh;
        border: 4px solid black;
        margin: 0 !important;

    & img {
        width: 100%;
        height: 100%;
    }
  }
}

こうなる。

swiper-containerには、元々swiper.css側で、marginがかけられているので、

そのまま使う場合、スライダーの両サイドにかなり大きめの空白が出来てしまう、なので、

margin: 0 !important; で、まずは周りの空白をリセット。

そうするとこんな感じで2カラムになる。

もしも、カラムやスライダーにサイズの指定がある場合は、

widthや、min-widthなどを上手く使って、ウィンドウサイズが変わっても、中身も上手くサイズが変わるように設定する。

ページャーの場所、位置の変え方(今回は右上に設置してみる)

// ページャーの位置の変え方

/* ここでページャーの横幅指定を一旦取り消し */
/* (swiper.cssでは、ここが width: 100%;になっているため、これがあると要素が横いっぱいに広がってしまい、自由に位置を動かせない) */

.swiper-pagination-bullets {
  width: initial !important;
}

.swiper-pagination {
  top: 20px;
  right: 30px;

  left: initial !important;
  bottom: initial !important;
}

まず、swiper.cssの、.swiper-pagination-bulletsで、width: 100%;の指定がされているため、

これがあると要素が横いっぱいに広がってしまい、自由に位置を動かせない。

なので、ここでページャーの横幅指定を一旦取り消し。

次に、.swiper-paginationの、toprightで、ページャーの場所を微調整、

元々、swiper.css側で、leftbottomの設定がされているので、ここを帳消しにしないと位置の調節が出来ない。

そのため、leftbottomを、!importantを使ってデフォルトの状態に戻す。

そうするとこんな感じで、ページャーが右上に移動する。

ページャーの色、大きさの設定

次に、ページャーの色や大きさの設定。

// ページャーの色や大きさの設定

.swiper-pagination-bullet {
  width: 5px !important; // !importantが必要
  height: 5px !important; // !importantが必要
}

.swiper-pagination-bullet-active {
  border: 3px solid #007aff; // アクティブ時、選択されている画像時の玉の色と大きさ
}

.swiper-pagination-bulletの、widthheightで玉の大きさを変える。

その際には、やっぱりswiper.cssの影響で、!importantを使用しないとCSSが反映されない。

なので、ページャーの位置やデザインを簡単に変更したい場合は、swiper.cssを直接書き換えた方が早いかも。

最後に、まとめ

Swiperには、単純なスライダー以外にも、フリップやフェードなど、他にも沢山の機能があるので、

興味がある人は、いろいろと試してみるといいかも。

その場合の書き方としては、フリップさせる場合は、script.jsに、

effect: “flip”,

を追加すればOK。

他にも、

effect: “fade”, だったり、
effect: “cube”, だったり、
effect: “coverflow”, だったりと、いろいろとあるので、興味がある人は動きを試しに見てみるといいかも。

Swiperに関しては、いろんなサイトにいろんな書き方が載っていますが、もし何を試しても全く動かないという場合は、

// jQueryの基本的な書き方

$(function() {
	この中に命令を書いていくといいかも。
});

これが、jQueryの基本的な書き方。

終わり。

コメント

タイトルとURLをコピーしました