夢みるゴリラ
夢みるゴリラ
  • 最終更新日：

【Swiperスライダー】バラバラの画像サイズを上下中央に揃えて実装する方法

今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介します。縦向きと横向きの画像を一緒にスライダーさせたいときなど、画像の横幅や高さが違う場合にオススメの実装方法です。

デモサイト

前提条件は以下

  • Swiperは4系を使う（IE対策）
  • jQueryは使わない

説明する環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1
この記事の目次

Swiperを使ってバラバラの画像サイズを上下中央に揃えて表示させる方法

SwiperはIE対応のために4系を使います。5系、６系を使う方はJavaScriptの書き方が変わってる可能性があるので注意しましょう。

Swiperを読み込む

CDNが用意されているので以下のようにSwiperを読み込みます。単体で動くのでjQuery本体を読み込む必要はありません。

<!-- swiper専用css-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css"/>
<!-- swiper.js -->
<script src="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"></script>

ダウンロードして読み込みたい方は公式サイトからどうぞ。

参考
Swiperダウンロードページ
Swiper

HTMLに書くこと

Swiperを動かすには以下のHTML構造とクラス名が必要になります。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="./images/demo01.jpg" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="./images/demo02.jpg" alt="" />
    </div>
    <div class="swiper-slide">
       <img src="./images/demo03.jpg" alt="" />
    </div>
   </div>

<!-- 丸いページネーション -->
<div class="swiper-pagination swiper-pagination-white"></div>

<!-- 左右のページ送り -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>

Sassで書くこと

ポイントは以下の３つです。

  • swiper-containerのheightにvwを使っている
  • swiper-slideにflexboxを使って、上下左右を中央揃えにしている
  • imgにはwidth: 100%;は使わない
.swiper-container {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  height: 40vw;
  max-height: 600px; //最大の高さ
  min-height: 400px; //最小の高さ
    
  .swiper-slide {
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: flex-start; //画像の高さを統一させない
    justify-content: center; //左右の中央揃え

    img {
      display: inline; //念のため
      width: auto; //念のため
      max-width: 100%;
      max-height: 100%;
      align-self: center; //上下の中央揃え
    }
  }
  .swiper-button-white {
    &:focus {
      outline: none;
    }
  }
  .swiper-button-prev {
    left: 25px;
  }
  .swiper-button-next {
    right: 25px;
  }
}

Javascriptで書くこと

init.jsなどファイルを作成してSwiperを動かす設定を書いていきます。

window.addEventListener('load', function(){
  let mySwiper = new Swiper(".swiper-container", {
    loop: true, //無限ループさせる
    speed: 400, //移動するスピード
    loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
    allowTouchMove: false,//マウスでのスワイプを禁止
    pagination: { //円形のページネーションを有効にする
     el: ".swiper-pagination",
     clickable: true //クリックを有効にする
    },
    navigation: { //左右のページ送りを有効にする
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
    }
  });
});

最後にinit.jsを読み込めば終わりです。

デモサイト

おわりに

今回はSwiperスライダーを使って、バラバラの画像サイズを上下中央に揃える方法を紹介しました。

縦向きと横向きの画像や、サイズが違う画像を一緒にスライダーできるのでギャラリー系と相性が良さようですね。

こちらの記事も読まれています