オンラインスクールの卒業制作で、swiperの無限ループを作成する機会があり、その中で学びがあったのでnoteで共有します。

swiperのライブラリを使ったカルーセルスライダーは過去に数パターン実装しており、特段難しいと感じていなかったが、今回無限ループのスライダーを実装するにあたって、うまく動かなかった部分があり、自分にとって価値ある学びだった。

それが、
swiperについてのfunctionの中でwidthを指定してしまうと、
無限ループの最後に空白が入ってしまってうまくループしなかったと言うこと。

上手くいかなかったパターン(widthを指定するとループが途切れる)

//無限ループswiper
const mySwiper = new Swiper(".swiper", {
  loop: true,
  slidesPerView: 2,
  speed: 1000,
  spaceBetween: 10,
  width: 305, //widthを指定しまうとループの最後に空白が入ってしまう
  allowTouchMove: false,
  autoplay: {
    delay: 0,
  },
});

上手く機能したパターン(widthを指定しない)

//無限ループswiper
const mySwiper = new Swiper(".swiper", {
  loop: true,
  slidesPerView: 2,
  speed: 1000,
  spaceBetween: 10,
  allowTouchMove: false,
  autoplay: {
    delay: 0,
  },
});

chatGPTに聞いたらswiperの中の要素をcloneするようなfunctionを追加する。とか出てきて、実際にcloneするfunctionを追加したがそれでも解決せず、、、
でも答えはめっちゃ簡単だった、１文消しただけ。
無限ループした瞬間超気持ちよかった。。。
本当に、、、これだからコーディングはおもしろい。

プロの人からしたら当たり前かもしれないし、他にもきっともっといいやり方があるだろうけど、今の自分にとっては超大きな学び。

これからもコードの理解深めるために自分の学びをアウトプットしていきます。