How do i add smooth transitions to Swiper.js?

Question

So I'm using Swiper.js by a friend's recommendation to create an auto-scrolling slider. But I can't figure out how to make the transitions between the slides smooth. Currently, when I change the autoplay ms it just changes the time it takes to change the slide.

Here is my code:

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>
    </>
  );
}

A really good example I found on how I want this to work is almost like the "recent reviews" that just scroll horizontally on https://www.trustpilot.com/

Answer 1

I have noticed you have not added the speed module. It helps smoothen the transition

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

Answer 2

set cssMode={true} in the swiper.js container,
but some features won't work...

Documentation: https://swiperjs.com/swiper-api#param-cssMode

Answer 3

Hey create function and use any were you will get smooth transitions automatic, breakpoints = it will define on different screen how much cart/Img yo want to display....

Need to be Applie CDN/IMPORT/NPM then it will be work Ref - https://swiperjs.com/swiper-api#css-styles

 const initSwiper = () => {
  const swiper = new Swiper(".swiper", {
    slidesPerView: 1,
    speed: 1200,
    spaceBetween: 30,
    freeMode: true,
    loop: true,
    autoplay: {
      delay: 400,
      disableOnInteraction: false,
    },
    breakpoints: {
      500: { slidesPerView: 2 },
      700: { slidesPerView: 3 },
      1200: { slidesPerView: 4 },
    },
    //effect: 'cards',
  });
};