如何向 Swiper.js 添加平滑过渡？答案

【问题标题】：How do i add smooth transitions to Swiper.js?如何向 Swiper.js 添加平滑过渡？
【发布时间】：2022-08-20 01:22:15
【问题描述】：

所以我在朋友的推荐下使用 Swiper.js 来创建一个自动滚动滑块。但我不知道如何使幻灯片之间的过渡平滑。目前，当我更改自动播放毫秒时，它只会更改更改幻灯片所需的时间。

这是我的代码：

import React from \"react\";
// Import Swiper React components
import { Swiper, SwiperSlide } from \"swiper/react\";

import ReviewCard from \"../Review/ReviewCard\";
import ReviewCard2 from \"../Review/ReviewCard2\";

// Import Swiper styles
import \"swiper/css\";
import \"swiper/css/pagination\";
import \"swiper/css/navigation\";

import \"swiper/css\";

// import required modules
import { Autoplay } from \"swiper\";

export default function App() {
  return (
    <>
      <Swiper
        slidesPerView={8}
        spaceBetween={30}
        slidesPerGroup={1}
        autoplay={{
          delay: 5500,
          disableOnInteraction: false,
        }}
        loop={true}
        loopFillGroupWithBlank={true}
        breakpoints={{
          // when window width is >= 320px
          320: {
            slidesPerView: 2,
            spaceBetween: 150,
          },
          // when window width is >= 480px
          480: {
            slidesPerView: 3,
            spaceBetween: 30,
          },
          // when window width is >= 640px
          640: {
            slidesPerView: 4,
            spaceBetween: 180,
          },
          768: {
            slidesPerView: 7,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 8,
            spaceBetween: 50,
          },
        }}
        modules={[Autoplay]}
        className=\"mySwiper\"
      >
        <SwiperSlide>
          <ReviewCard />
        </SwiperSlide>
        <SwiperSlide>
          <ReviewCard />
        </SwiperSlide>
        <SwiperSlide>
          <ReviewCard2 />
        </SwiperSlide>
        <SwiperSlide>
          <ReviewCard />
        </SwiperSlide>
        <SwiperSlide>
          <ReviewCard />
        </SwiperSlide>
        <SwiperSlide>
          <ReviewCard2 />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

我发现了一个非常好的例子，说明我希望它如何工作，就像在https://www.trustpilot.com/ 上水平滚动的“最近的评论”一样

标签： swiper.js react-swiper

【解决方案1】：

我注意到您没有添加速度模块。它有助于平滑过渡

<Swiper
    ...
    speed={1200}
    ...
  >

【讨论】：