🔰

Tailwind CSSとSwiperで無限ループ実装で解決したこと

に公開

デフォルトでイージングが指定されているので、.swiper-wrapperにease-linearを追加する

    <Swiper
      spaceBetween={20}
      slidesPerView={2.3}
-     className="w-[1160px]"
+     className="w-[1160px] [&_.swiper-wrapper]:ease-linear!"
      modules={[Autoplay]}
      autoplay={{
        delay: 0,
        disableOnInteraction: false,
      }}
      loop={true}
      speed={30000}
      allowTouchMove={false}
    >
      {[...Array(5)].map((_, index) => (
        <SwiperSlide key={index}>
          <FvSlider />
        </SwiperSlide>
      ))}
    </Swiper>

Discussion