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}
            }}
        >

score 52 · Accepted Answer · answered Jul 24 '20 at 08:45

52

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]);

answered Jul 24 '20 at 08:45

jony89

5,155
3
30
40

Can you specify how to use delay? – Jnewbie Sep 04 '20 at 14:51
4

THis does not fix the issue - however this is correct in terms of this is needed – Joe Sep 07 '20 at 20:12

score 20 · Answer 2 · answered Apr 12 '22 at 22:56

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>

score 12 · Answer 3 · answered Dec 22 '20 at 22:06

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>

score 7 · Answer 4 · answered Apr 03 '22 at 05:39

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>
)

Now I just need to get my buttons with onClick={() => swiper.slideNext()} and onClick={() => swiper.slidePrev()} to work. Any suggestions? — Todd, Jun 01 '23 at 02:00

score 4 · Answer 5 · answered Aug 12 '22 at 16:46

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'
 >

score 3 · Answer 6 · answered Jul 08 '22 at 12:13

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

score 0 · Answer 7 · answered Jul 28 '23 at 21:27

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';

React SwiperJs autoplay not making the swiper to auto swipe

7 Answers7

Linked