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

スライダーで名を馳せている(？)[swiper](https://swiperjs.com/)

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

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

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


# 実装

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

```js: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";
  }
});

```


[![Image from Gyazo](https://i.gyazo.com/65220eaf11d4e4bec40c7b2a848a9abf.gif)](https://gyazo.com/65220eaf11d4e4bec40c7b2a848a9abf)


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

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

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

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

# 最後に
弊社では、一緒に働いてくれるエンジニアを募集しています。
↓最新技術や自社開発に興味のある方はこちらから↓
[Wantedly - スタジオアンビルト株式会社](https://www.wantedly.com/companies/studiounbuilt)

こんなWebサービスを作っています。
・[マドリー](https://madree.jp/)
・[Studio Unbuilt](https://www.studiounbuilt.com/)