React SwiperJs autoplay not making the swiper to auto swipe

user_1164847 0
Viewed 23549

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}
            }}
        >
swiper.js next.js reactjs javascript
6 Answers

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

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>

user_95476580

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

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

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

user_43294720

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