swiper.js - 如何向 Swiper.js 添加平滑过渡？

Question

所以我在 friend 的推荐下使用 Swiper.js 来创建一个自动滚动的 slider 。但我无法弄清楚如何使幻灯片之间的过渡平滑。目前，当我更改自动播放 ms 时，它只会更改更改幻灯片所需的时间。

这是我的代码:

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/ 上水平滚动的“最近评论”

Answer 1

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

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