swiper(プラグインではなくDL実装)のレスポンシブ化

Question

前提・実現したいこと

swiperでカルーセルスライダーを設置しました。
PC表示の時は
中央に画像1枚表示、両端に前後の画像の半分程度が見えるようにしています。

1024px以下のデバイスでは両端は見せず、1枚のみがスライドする仕様にしたいのが目的です。

script.jsに記述してある命令文を変更しましたが、うまくいきません。

1024px以下なのに、一枚表示にはならず、1024px以下で複数表示になってしまいます。尚かつ、1024px以上の時、一枚表示になってしまい、センター表示ではなく、左寄り配置になってしまいます。

どこが間違っているのか教えていただけますでしょうか。

現在のコード

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  autoplay: {
    delay: 6000,
    disableOnInteraction: true
  },
  pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
  slidesPerView: 1.5,
 centeredSlides : true
});

試したこと

var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  loop: true,
  autoplay: {
    delay: 6000,
    disableOnInteraction: true
  },
  pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
  slidesPerView: 1.5,
 centeredSlides : true,
 breakpoints: {
    1024: {
      slidesPerView: 1,
      spaceBetween: 0
    }
  },
});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

「動かない」「うまくいかない」では何も伝わりませんので、「実際に起きたこと」を記載してください。
https://teratail.com/help/question-tips#questionTips3-4

Answer 1

var swiper = new Swiper('.swiper-container', {

 navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
 },
  
 autoplay: {
  delay: 6000,
  disableOnInteraction: true
 },
 
 pagination: {
  el: '.swiper-pagination',
  type: 'bullets',
  clickable: true,
 },
 
 breakpoints: {
 　　// 1024px以上の場合
    1024: {
     slidesPerView: 1.5,
     centeredSlides: true,
     loop: true,
    }
  },
 
});

自己解決しました。
slidesPerViewの値をブレイクポイント毎に見直し、組み合わせを整理して記述しました。焦っていたので質問も雑になってしまいご迷惑をおかけしました。ありがとうございました。