React SwiperJs autoplay not making the swiper to auto swipe

Question

I am using this swiper in React: https://swiperjs.com/react/

I tried to make it "autoplay" but it doesn't auto swipe. This is what I tried:

// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    SwiperStyle: {
        backgroundColor: '#f5f5f5',
        height: '58px',
        width: '100%',
    },
});

export default function TextInfoSlider(props) {
    const classes = useStyles();

    return (
        <div>

            <Swiper
                loop={true}
                autoplay={{
                    delay: 500,
                    disableOnInteraction: false
                }}
            >

                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
                <SwiperSlide>Slide 4</SwiperSlide>

            </Swiper>

            <style jsx global>{`
                    .swiper-container {
                        background-color: #f5f5f5;
                    }
           `}</style>
        </div>
    )
}

I have also tried to just use boolean on the autoplay but it also doesn't work:

        <Swiper
            loop={true}
            autoplay={true}
            }}
        >

Humes

Answer 1

By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navitation, Pagination and other components, you have to install them first

It does not seem you have installed Autoplay component.

import SwiperCore, { Autoplay } from 'swiper';
...
SwiperCore.use([Autoplay]);

Insidious

Can you specify how to use delay? – Ringo

THis does not fix the issue - however this is correct in terms of this is needed – Nevins

Answer 2

https://swiperjs.com/demos#autoplay

import modules from swiper and pass it as props to Swiper component

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper";

   <Swiper
        spaceBetween={30}
        centeredSlides={true}
        autoplay={{
          delay: 2500,
          disableOnInteraction: false,
        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Autoplay, Pagination, Navigation]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>

Annulate

Answer 3

configur swiper in App.jsor wherever you like:

import 'swiper/swiper-bundle.css';
import SwiperCore, { Autoplay } from 'swiper';

function App() {

  SwiperCore.use([Autoplay])

  ...
}

then use like this:

<Swiper autoplay={{ delay: 3000 }} >...</Swiper>

Tobietobin

Answer 4

for swiper version 8.3

imports should look like this

import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/autoplay";

and your swiper react component, mine wasnt working on autoplay={true} so I added autoplay={{delay: 2000} anyways below is my whole swiper it will help you

<Swiper
    modules={[Autoplay, Pagination]}
    pagination={{clickable: true}}
    slidesPerView={1}
    autoplay={{
          delay: 2000,
          pauseOnMouseEnter: true,
          disableOnInteraction: false
         }}
    loop
    className='swiper-container'
 >

Fleshly

Answer 5

in NextJs run for me with this code:

import {  Pagination } from 'swiper';
import SwiperCore, { Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';

// ...
const HomeComponent = () => {
  SwiperCore.use([Autoplay]);
return (
    <Swiper
          className="home_slider"
          modules={[Pagination,Autoplay]}
          slidesPerView={1}
          onSlideChange={() => console.log('slide change')}
          onSwiper={(swiper) => console.log(swiper)}
          pagination={{ clickable: true }}
          autoplay
        >
          <SwiperSlide>
           <Image src={Image1}  alt='' />
          </SwiperSlide>
</Swiper>
)

Alluring

Now I just need to get my buttons with onClick={() => swiper.slideNext()} and onClick={() => swiper.slidePrev()} to work. Any suggestions? – Fleeman

Answer 6

First you need to import

import { Autoplay, Pagination } from "swiper";

then in Swiper Component

 <Swiper
    slidesPerView={1}
    loop={true}
    pagination={{ clickable: true}}
    modules={[Pagination,Autoplay]}
    className={`mySwiper ${styledClasses}`}
    autoplay={{ delay: 2000}}
  > 
  {/* Slider here */}
  </Swiper

this will run it properly in reactjs

Amaro

Answer 7

if none of mentioned solutions worked, just give swiper component a key

<Slider01.Slider
          items={sliderItems}
          slidesPerView={sliderItems?.length > 1 ? 1.2 : 1}
          spaceBetween={20}
          radius={12}
          modules={[Navigation, Autoplay]}
          navigation
          key={sliderItems.length}
          loop
          autoplay={{
            delay: 1500,
            disableOnInteraction: false
          }}

Biegel

Answer 8

For those who run into this issue in 2024: First, you have to import css styles:

import 'swiper/css/autoplay';

What's more, syntax has changed, so now you have to import Autoplay from modules, so before initializing swiper you have to write this:

import { Autoplay } from 'swiper/modules';

So sample code will look like this:

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/autoplay';
import { Autoplay } from 'swiper/modules';
const Swiper: React.FC = () => {
  return (
  <Swiper 
  modules={[Autoplay]}
  autoplay={{delay:2500}}>
  </Swiper>
);
}

Dowsabel

Answer 9

I just had this same error but after trying the different tricks provided here noting worked so i lastly i tried:

To solve this problem i had to directly search for the Autoplay component in the swiper doc found inside the node_modules as follows.

import Autoplay from './../../../node_modules/swiper/modules/autoplay.mjs';

Arched

Answer 10

First, install Swiper:

npm install swiper

Then, import the necessary modules and styles in your component:

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/swiper-bundle.min.css';
import 'swiper/swiper.min.css';

This setup should work without any errors.

Goethite