画面に合わせたスライダーサイズの設定方法 | 長期有給インターン生の日常|株式会社ガーディアン | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

みなさんこんにちは！受託プロダクトチームインターン生の肖かえいです!!

今日はswiperのサイズ設定の方法について書いていきたいと思います！！
スライダーの枚数の設定ではなく特定の幅を設定したいと思った時めちゃくちゃ困りますよね
スライダーではslidesPerViewで一度に表示させる画像の枚数を設定することができますがあくまで設定できるのは画像のみで画像の幅を固定化することはできません。
なので例えば画像を1170pxで固定したいと考えた場合画面幅によって細かくbreakpointを設定しなければいけません。
しかしふと画面幅を取得して計算すれば実現できるのではないかと考え、コードを書いてみました。
というのも例えば画面幅95％にしたいときslidesPerView: 1.05ということに気が付いたのです。
今回は画面幅1170pxに固定化する際のコードを書いてみました

let width = window.innerWidth;//ウィンドウのサイズを取得
let swiperwidth = 1+(1170/width);//slidesPerViewに当てはめられるように割合計算

1170:{slidesPerView: swiperwidth,
　　　spaceBetween: 10, },

とすればどんな画面幅にでも対応することができます。しかしこのコードには欠点があり、一度読み込まれた際に動作するので読み込まれたあとに画面幅を変更してもスライダーのサイズは変わりません。
あとはこの部分を解消さえすれば完璧なんですけどね…

---------------------------------------------------------------------------------------------
インターン募集ページ: https://guardian.jpn.com/recruit/intern/
メンバー紹介ページ：https://guardian.jpn.com/member/Xiao_Kaei/
---------------------------------------------------------------------------------------------