当サイトはアフィリエイト広告を利用しています
スライダーのSwiperを使ってみよう！

スライダーのSwiperの使い方と、カスタマイズ方法

Javascript&jQuery スライダーのSwiperを使ってみよう！
目次

Swiperの使い方について

いくつかやり方があるよ！

SwiperのCDNによる方法

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

htmlの<head>に、これを書いておいて下さい。

今現在（2024/02）の最新版は、ver11.0.5です。

上記の9の部分を11に変えればOK！

Swiperのファイルをダウンロードして配置する方法

こちらがSwiperの公式サイトです。

Swiperの公式 https://swiperjs.com/

Get Startedをクリックします。

Download assetsをクリックします。

書かれているURLに移動します。

Filesをクリックします。

この2つを見つけて、右クリックから名前を付けて保存します。

ファイル名とファイルの種類は、そのままでいいですね。保存をクリックします。

<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css">

これをhtmlの<head>内のcssファイルの前に、配置してください。

<script type="text/javascript" src="js/swiper-bundle.min.js"></script>

これをhtmlの<body>の最後にjsファイルの前に、配置してください。

この配置が、1番動作不良起こさない感じかな。

Swiper公式のDEMO集

Swiper公式のDEMO集は、コチラ！

https://swiperjs.com/demos

Swiperの基本的な使い方と、矢印ボタンのカスタマイズ

実際に作っていこう！デモ画面はこちら！1番上のやつ！
デモ画面 https://poncode.com/demos/demo4

html

  <!-- swiper -->
<div class="swiper topmain">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/topmain_01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_06.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_07.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_08.jpg" alt=""></div>
  </div>
    <!-- ページネーション -->
  <div class="swiper-pagination"></div>
    <!-- 戻るボタンと進むボタン -->
  <div class="topmain-button-prev"></div>
  <div class="topmain-button-next"></div>
</div><!-- swiper -->

同じページに、スライダーを複数設置することがある為に、topmainというクラス名を付け加えています。

css

/* スライダー */
.topmain {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.topmain .swiper-slide img {
  width: 100%;
}
.topmain .swiper-pagination-bullet {
  background: #fff;
}
.topmain-button-prev,
.topmain-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
}
/* pc・タブレット */
@media screen and (min-width:768px) {
.topmain-button-prev,
.topmain-button-next {
  width: 45px;
  height: 45px;
}
}
/* sp */
@media screen and (max-width:767px) {
.topmain-button-prev,
.topmain-button-next {
  width: 22px;
  height: 22px;
}
}    
.topmain-button-prev {
  left: 0;
  background-image: url('../images/btn_prev1.png');
}
.topmain-button-next {
  right: 0;
  background-image: url('../images/btn_next1.png');
}

矢印ボタン、ページネーションが、デフォルトだと結構強い水色なんですね。

矢印ボタンを画像にして配置、ページネーションは色を変えています。

レスポンシブにも対応しています。

js

const topmain = new Swiper('.topmain', {
  loop: true, //ループさせる
  effect: 'fade', //フェードのエフェクト
  speed: 1200,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false, //操作後、自動再生止まらない
  },
  // ページネーション
  pagination: {
    el: '.topmain .swiper-pagination',
  },
  // ボタン
  navigation: {
    nextEl: '.topmain-button-next',
    prevEl: '.topmain-button-prev',
  },
});

オプションは、めっちゃたくさんあります。公式サイトのこちらに書いています。

Swiper API https://swiperjs.com/swiper-api#parameters

全部英語ですけど…（笑）

主要なものを以下に書きだします。

オプション一覧

基本オプション

名前デフォルト値説明
loopfalsetrueでループ
effect‘slide’‘slide’ 以外 ‘fade’ , ‘cube’ , ‘coverflow’ , ‘flip’ , ‘creative’
allowTouchMovetruetrueで、スワイプを可能にする
autoHeightfalsetrueで、スライドの高さに合わせて、swiperの高さを変える。
direction‘horizontal’スライドの動き方で、水平方向（’horizontal’）or 垂直方向（’vertical’）
slidesPerView1スライダーコンテナに表示されるスライド数。数値 or ‘auto’
spaceBetween0スライドの間隔（px）
speed300スライド間の移行時間（ミリ秒）
breakpointsなし異なるレスポンシブブレークポイントに、異なるパラメータを設定できます。

navigation（前へ次への矢印）

名前デフォルト値説明
nextElnull（何もない状態）次へボタンのクラス名を指定。デフォルト値 swiper-button-next
prevElnull（何もない状態）前へボタンのクラス名を指定。デフォルト値 swiper-button-prev

pagination

名前デフォルト値説明
elnull（何もない状態）paginationのクラス名を指定。デフォルト値 swiper-pagination
type‘bullets’‘bullets’ 以外 ‘fraction’ , ‘progressbar’ , ‘custom’
clickablefalsetrueで、paginationボタンのクリックで適切なスライドに移動します。’bullets’時のみ有効

scrollbar

名前デフォルト値説明
elnull（何もない状態）scrollbarのクラス名を指定。デフォルト値 swiper-scrollbar
hidetruetrueで、操作時以外スクロールバー非表示
draggablefalsefalseで、スクロールバーの操作不可

autoplay

名前デフォルト値説明
delay3000スライドが動く間隔（ミリ秒）
stopONLastSlidefalsetrueで、最後のスライドに達すると自動再生停止（ ループモードで効果なし）。
disableOnInteractiontruetrueで、ユーザー操作後自動再生停止
reverseDirectionfalsetrueで、逆方向の自動再生を有効

ページネーションのカスタマイズ

css

先ほど、cssの.topmain .swiper-pagination-bullet { background: #fff; }で色だけを変えました。

この部分を書き換えます。

/* 非選択中のページネーション */
.topmain .swiper-pagination-bullet {
  background-color: transparent; /* デフォルトの黒背景を透明に */
  background-image: url('../images/heart02.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 21px;
  width: 23px;
  opacity: 1; /* デフォルトが0.2で透過 */
}
/* 選択中のページネーション */
.topmain .swiper-pagination-bullet-active {
  background-image: url('../images/heart01.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 21px;
  width: 23px;
}

ページネーションをハートにして、選択中をゴールドのハート、非選択中をシルバーのハートにしてみました。

js

// ページネーション
pagination: {
  el: '.topmain .swiper-pagination',
  clickable: true,
},

clickable: true,を追加して、クリック出来るようにしてみました。

それが、デモ画面の上から2番目のやつです。

矢印ボタン、ページネーションをスライダーから外に出す方法

ドットとボタンを、<div class="swiper">から外に出すだけです！
デモはデモ画面の上から3番目！
デモ画面 https://poncode.com/demos/demo4

html

  <!-- swiper -->
<div class="bnr_footer_Area">
  <div class="swiper bnr_footer">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="images/bnr_footer_01.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/bnr_footer_02.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/bnr_footer_03.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/bnr_footer_04.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/bnr_footer_05.jpg" alt=""></div>
      <div class="swiper-slide"><img src="images/bnr_footer_06.jpg" alt=""></div>  
      <div class="swiper-slide"><img src="images/bnr_footer_07.jpg" alt=""></div> 
      <div class="swiper-slide"><img src="images/bnr_footer_08.jpg" alt=""></div>       
    </div><!-- swiper-wrapper -->
  </div><!-- swiper bnr_footer -->
    <!-- ページネーション -->
  <div class="swiper-pagination"></div>  
    <!-- 戻るボタンと進むボタン -->
  <div class="bnr_footer-button-prev"></div>
  <div class="bnr_footer-button-next"></div>
</div><!-- bnr_footer_Area -->

css

/* スライダー */
.bnr_footer_Area {
  position: relative;
  margin: 0 auto;
}
.bnr_footer .swiper-slide img {
  width: 200px;
}
.bnr_footer_Area .swiper-pagination {
  position: absolute;
  bottom: -25px;
}
.bnr_footer-button-prev,
.bnr_footer-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: contain;
}
.bnr_footer-button-prev {
  background-image: url('../images/btn_prev1.png');
}
.bnr_footer-button-next {
  background-image: url('../images/btn_next1.png');
}
   
@media screen and (min-width:1025px) {
.bnr_footer_Area {
  width: 830px;
}  
.bnr_footer {
  width: 830px;
}
.bnr_footer-button-prev {
  left: -45px;
}
.bnr_footer-button-next {
  right: -45px;
}
.bnr_footer-button-prev,
.bnr_footer-button-next {
  width: 45px;
  height: 45px;
}
}

@media screen and (min-width:768px) and (max-width:1024px) {
.bnr_footer_Area {
  width: 620px;
}    
.bnr_footer {
  width: 620px;
}
.bnr_footer-button-prev {
  left: -45px;
}
.bnr_footer-button-next {
  right: -45px;
}
.bnr_footer-button-prev,
.bnr_footer-button-next {
  width: 45px;
  height: 45px;
}
}

@media screen and (min-width:520px) and (max-width:767px) {
.bnr_footer_Area {
  width: 410px;
}    
.bnr_footer {
  width: 410px;
}
.bnr_footer-button-prev {
  left: -32px;
}
.bnr_footer-button-next {
  right: -32px;
}
.bnr_footer-button-prev,
.bnr_footer-button-next {
  width: 22px;
  height: 22px;
}
}

@media screen and (max-width:519px) {
.bnr_footer_Area {
  width: 200px;
}   
.bnr_footer {
  width: 200px;
}
.bnr_footer-button-prev {
  left: -32px;
}
.bnr_footer-button-next {
  right: -32px;
}
.bnr_footer-button-prev,
.bnr_footer-button-next {
  width: 22px;
  height: 22px;
}
}

今回は、画像を4枚並べたスライダーにして、画像を200pxに、画像と画像の間隔を10pxにしてみました。

クラス名 bnr_footer は、フッターのバナーみたいだったから適当に付けただけです。

あとはよく見るやつですね。

外枠にposition: relative;を指定して、position: absolute;でいろいろ位置づけしていくやつです。

画像4枚並びのスライダーの場合、画像を8枚以上用意すべし！

js

const bnr_footer = new Swiper('.bnr_footer', {
  loop: true, //ループさせる
  slidesPerView: 4, // 画像の表示枚数
  speed: 400,
  autoplay: {
    delay: 4500,
    disableOnInteraction: false, //操作後の自動再生止まらない
  },
  breakpoints: {
    // when window width is >= 280px
    280: {
      slidesPerView: 1,
    },
    // when window width is >= 520px
    520: {
      slidesPerView: 2,
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 3,
    },
    // when window width is >= 1025px
    1025: {
      slidesPerView: 4,
    },
  }, 
  // ページネーション
  pagination: {
    el: '.bnr_footer_Area .swiper-pagination',
  }, 
  // ボタン
  navigation: {
    nextEl: '.bnr_footer-button-next',
    prevEl: '.bnr_footer-button-prev',
  },
});

サムネイル連動させる方法

スライダーを2個作って、jsで関連付けるだけ！デモ画面の上から4番目のやつです。
デモ画面 https://poncode.com/demos/demo4

html

  <!-- swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/topmain_01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_06.jpg" alt=""></div>  
    <div class="swiper-slide"><img src="images/topmain_07.jpg" alt=""></div> 
    <div class="swiper-slide"><img src="images/topmain_08.jpg" alt=""></div>   
  </div>
    <!-- 戻るボタンと進むボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
  <!-- mySwiper thumbnail -->
<div class="swiper mySwiper2">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/topmain_01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_02.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="images/topmain_06.jpg" alt=""></div>  
    <div class="swiper-slide"><img src="images/topmain_07.jpg" alt=""></div> 
    <div class="swiper-slide"><img src="images/topmain_08.jpg" alt=""></div>  
  </div>
</div>

css

.mySwiper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.mySwiper .swiper-slide img {
  width: 100%;
}
.mySwiper .swiper-button-next::after, .mySwiper .swiper-button-prev::after {
  color: #fff;
}  

.mySwiper2 {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.mySwiper2 .swiper-slide {
  width: 25%;
  opacity: 0.4;
}
.mySwiper2 .swiper-slide-thumb-active {
  opacity: 1;
}
.mySwiper2 .swiper-slide img {
  width: 100%;
}

js

const sliderThumbnail = new Swiper('.mySwiper2', {
  loop: true, //ループさせる
  spaceBetween: 10, // 画像と画像の間隔
  slidesPerView: 4, // 画像の表示枚数
  freeMode: true, //スワイプ時の動きが強さでスクロールされる
});
const slider = new Swiper('.mySwiper', {
  loop: true, //ループさせる
  navigation: {
    nextEl: '.mySwiper .swiper-button-next',
    prevEl: '.mySwiper .swiper-button-prev',
  },
  thumbs: {
    swiper: sliderThumbnail,
  },
});

上のthumbs: {swiper: sliderThumbnail,}で、スライダーとサムネイルを関連付けています。

画像サイズがバラバラだった場合

ワイドな横画像や縦画像があった場合ですね。

デモの1番上のオーソドックスなやつと基本は一緒ですね。

これのデモは、1番下のやつです。

デモ画面 https://poncode.com/demos/demo4

html

<div class="swiper-slide v-img"><img src="images/topmain_11.jpg" alt=""></div>

縦画像だけ、v-imgというクラスを付けます。（クラス名は自由）

css

.swiper {
  aspect-ratio: 16 / 9;
  border: 1px solid #ddd;
}
.swiper .swiper-slide {
  display: flex;
}
.swiper .swiper-slide img {
  align-self: center;
}
.swiper .swiper-slide.v-img img {
  height: 100%;
  object-fit: contain;
}

これを、付け加えるだけですね。

aspect-ratio: 16 / 9;は、横16に対して縦9という意味ですね。

5~10行目は、画像を縦軸の中心にする為ですね。これを書かないと、ワイドな画像は上に配置されて、下がガラガラになります。

11~14行目は、縦画像の上下をトリミングされたくない、さらに横画像と同じ枠内におさめたいので、こういう風にしてみました。

js

ここでは、slideにして、ページネーションを消していますが、javascriptの部分は基本的に変更なしです。

しかし、fadeにした場合、画像が重なる為、

fadeEffect: { 
  crossFade: true
},

を追加して下さい。

これで、重なりを解消出来ます。

さいごに

この前、初めてブロックエディタでギャラリーを実装したら、縦画像を入れた時に縦が優先されて、横画像が変になってしまったんですね。

実は、その時にやったカスタマイズが、画像がバラバラだった場合で紹介したやつなんですね。

また、もっといい方法があれば教えて頂ければ幸いです。

今日は、ありがとうございました。では、また！

Javascript&jQueryの最新記事4件