swiperで正方形画像を表示する

スライダーで名を馳せている(？)swiper

画面いっぱいにスライドさせるとか、画像サイズに合わせて、とかの利用ケースはよく見るけど
正方形の画像をスライドさせる(インスタ画像っぽく)というのが見当たらなかったので自分用メモ

要件

• 画像は正方形
• ループのアニメーション
• windowサイズにとらわれない

とした場合どういうふうに実装するか

実装

html

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class='img-wrapper'>
            <img class="img-item" src="https://placehold.jp/500x700.png"/>
          </div>
        </div>
        <div class="swiper-slide">
          <div class='img-wrapper'>
            <img class="img-item" src="https://placehold.jp/500x700.png"/>
          </div>
        </div>
        <div class="swiper-slide">
          <div class='img-wrapper'>
            <img class="img-item" src="https://placehold.jp/500x700.png"/>
          </div>
        </div>
        <div class="swiper-slide">
          <div class='img-wrapper'>
            <img class="img-item" src="https://placehold.jp/500x700.png"/>
          </div>
        </div>
        <div class="swiper-slide">
          <div class='img-wrapper'>
            <img class="img-item" src="https://placehold.jp/500x700.png"/>
          </div>
        </div>
    </div>
</div>

sass

.swiper {
    width: 100%;
    
    &-wrapper {
        transition-timing-function: linear;
    }
    
    &-slide {
      margin: 0 2px;
      .img-wrapper {
        .img-item {
          // 正方形からはみ出た分は中央でトリミング。
          object-fit: cover;
        }
      }
    }
}

js

  const swiper = new Swiper('.swiper', {
    // 画面上何枚表示するか
    slidesPerView: 2.5,
    // ループするか
    loop: true,
    // 回転速度
    speed: 9500,
    // 自動で回るか
    autoplay: {
      // 回った時のストップタイム
      delay: 0,
    },
  });

//  swiperで横幅が算出されてスタイルが当てられてしまう
//　今回は正方形にしたいのでswiperで当てたwidth値をheight値に設定している
const itemWidth = document.getElementsByClassName("swiper-slide")[0].clientWidth;

// swiper全体の高さを設定
document.getElementsByClassName("swiper-wrapper")[0].style.height = itemWidth + "px";

// 画像部分の正方形のサイズを設定
const imgItems = document.getElementsByClassName("img-item");
 for(var i = 0; i < imgItems.length; i++){
  imgItems[i].style.width = itemWidth+ "px";
  imgItems[i].style.height = itemWidth+ "px";
  }

// windowサイズがリサイズされても正方形を保つ
window.addEventListener('resize', function() {
  const itemWidth = document.getElementsByClassName("swiper-slide")[0].clientWidth;
  const imgItems = document.getElementsByClassName("img-item");
　for(var i = 0; i < imgItems.length; i++){
    imgItems[i].style.width = itemWidth+ "px";
    imgItems[i].style.height = itemWidth+ "px";
  }
});

説明

swiperはslidesPerViewを指定すると
画面サイズを計測して１スライドあたりの幅を算出して
スライドに対して自動でwidthスタイルを当ててくれる

なので、正方形にするには、そのswiperから設定されたwidthを取得して、
同じpxをheightに充ててあげればいい

そういったことをしているjsを書きました

ただこれだけだと、画像が上部分で切られてしまうので
object-fit: cover;のプロパティを充てて真ん中でトリミングするようにしています
(任意の場所でトリミングしたいって言われたら困っちゃうなーーー)

最後に

弊社では、一緒に働いてくれるエンジニアを募集しています。
↓最新技術や自社開発に興味のある方はこちらから↓
Wantedly - スタジオアンビルト株式会社

こんなWebサービスを作っています。
・マドリー
・Studio Unbuilt