• 最終更新日:

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

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

デモサイト

前提条件は以下

  • Swiperは4系を使う(IE対策)
  • jQueryは使わない

説明する環境は以下

  • macOS Catalina v10.15.5
  • Visual Studio Code v1.46.1

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

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

Swiperを読み込む

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

<!-- swiper専用css-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<!-- swiper.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

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

HTMLに書くこと

Swiperを動かすには、以下のHTML構造とクラス名が必要になります。個人的に設定したクラス名はjs-swiper-01のみです。

<div class="swiper-container">
  <div class="swiper-wrapper js-swiper-01">
     <!-- 画像1 -->
     <div class="swiper-slide">
        <img src="./images/swiper-img01.jpg" alt="" />
     </div>
     <!-- 画像2 -->
     <div class="swiper-slide">
        <img src="./images/swiper-img02.jpg" alt="" />
     </div>
     <!-- 画像3 -->
     <div class="swiper-slide">
        <img src="./images/swiper-img03.jpg" alt="" />
     </div>
  </div>
  
  <!-- 左右のページ送り -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

Sassで書くこと

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

  • 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を動かす設定を書いていきます。

if (document.querySelector(".js-swiper-01")) { //クラス名js-swiper-01があれば作動させる
  var mySwiper = new Swiper(".js-swiper-01", {
    loop: true, //無限ループさせる
    speed: 400, //移動するスピード
    loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする

    navigation: { //ページネーションの有効化
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    allowTouchMove: false, //スライプの禁止、クリックでの移動を禁止する
    slidesPerView: 1, //見せる枚数
  });
}

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

デモサイト

おわりに

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

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