JavaScriptを使ってレスポンシブに対応させたい

Question

JavaScriptのswiperを使ってスライダーを作成しました。

パソコンで見るのにはいいのですが、タブレットやスマホでも見れるようにと画面をせばめると、画像も小さくなってしまいます。。。

一画面には5枚の画像が並んで表示されるようにJavaScriptで記述しました。

画面をせばめると、この5枚の表示枚数を３枚、２枚といったように表示させたいのです。

・タブレット（１０００pxまで）３枚表示
・スマホ（７００pxまで）２枚表示

if文を使って記述してみたのですが、思うようにいきません。。。

★該当のスライダー↓

★該当のサイト↓
https://mu-ran.github.io/website/

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【html】

<section class="contents3"> <h2 class="contents__title">制作実績</h2> <p class="contents__works">WORKS</p> <!-- スライダー --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 9.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 10.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 11.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 12.jpg" alt=""> </div> </div> <div class="swiper-slide"> <div class="swiper-slide-container"> <img class="swiper-slide-img" src="img/グループ 13.jpg" alt=""> </div> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <!-- スライダー --> </section>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【css】
/* スライダー */
body {
background-color: pink;
}

.swiper-container {
width: 100%;
margin: 20px auto;
}

.swiper-slide-container {
text-align: center;
font-size: 18px;
background: #fff;
max-width: 322px;
margin: auto;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

.swiper-slide-img {
width: 100%;
}
/* スライダー */

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
【JavaScript】
// スライダー
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 4,
centeredSlides: true,//1枚目のスライド中央配置
paginationClickable: true,
loop: true,
spaceBetween: 30,
slideToClickedSlide: true,

autoplay: {
  delay: 5000,
  disableOnInteraction: true,
},
});

★レスポンシブさせたい箇所ですーーーーーーーーー↓
if(window.matchMedia('(max-width: 1000px)').matches) {
//タブレット処理
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
centeredSlides: true,//1枚目のスライド中央配置
paginationClickable: true,
loop: true,
spaceBetween: 30,
slideToClickedSlide: true,

    autoplay: {
      delay: 5000,
      disableOnInteraction: true,
    },
    });

} else if (window.matchMedia('(max-width:700px)').matches) {
//スマホ処理
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 2,
centeredSlides: true,//1枚目のスライド中央配置
paginationClickable: true,
loop: true,
spaceBetween: 30,
slideToClickedSlide: true,

    autoplay: {
      delay: 5000,
      disableOnInteraction: true,
    },
    });

★レスポンシブさせたい箇所ですーーーーーーーーー↑

Answer 1

前回の回答に書いた通りなのですが、難しいですか？

Responsive breakpoints | Swiper Demos
Parameters | Swiper API

---

こちらの記事でしたらどうですか？

レスポンシブの設定の仕方 | Swiper.jsの使い方「レスポンシブ等の具体例」とオプション解説

Comments

[yuuki777]

わざわざ記載してくださっていたのに気づかずに済みません。

ブレイクポイントやってみます！

[yuuki777]

昨日に引き続きありがとうございました。

無事、レスポンシブ対応ができました。

とても助かりました。

[Lhankor_Mhy]

お役に立てたようで何よりです。