【WEB制作】swiperライブラリ、無限ループの作り方と苦戦したところ
オンラインスクールの卒業制作で、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を追加したがそれでも解決せず、、、
でも答えはめっちゃ簡単だった、1文消しただけ。
無限ループした瞬間超気持ちよかった。。。
本当に、、、これだからコーディングはおもしろい。
プロの人からしたら当たり前かもしれないし、他にもきっともっといいやり方があるだろうけど、今の自分にとっては超大きな学び。
これからもコードの理解深めるために自分の学びをアウトプットしていきます。
いいなと思ったら応援しよう!
お読みくださりありがとうございます!よければぜひサポートお願いします!励みになります!