![見出し画像](https://assets.st-note.com/production/uploads/images/127728048/rectangle_large_type_2_3e912b75facc5ca9ab7720b16657e74e.png?width=1200)
Photo by
113355
【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文消しただけ。
無限ループした瞬間超気持ちよかった。。。
本当に、、、これだからコーディングはおもしろい。
プロの人からしたら当たり前かもしれないし、他にもきっともっといいやり方があるだろうけど、今の自分にとっては超大きな学び。
これからもコードの理解深めるために自分の学びをアウトプットしていきます。
いいなと思ったら応援しよう!
![tomy/WEB制作についての雑記note](https://assets.st-note.com/production/uploads/images/94000415/profile_b695ac66bd371a2762bd25aeac57e41a.jpeg?width=600&crop=1:1,smart)