1

I am using SWIPER API with my React App but I can not seem to get the autoplay feature working. Even though I have imported these features as shown with the code below

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

The other attributes, such as spaceBetween, onSwiper etc are working, but I cant seem to get the pagination, Navigation and autoplay to work, and their documentation is not entirely clear on how to implement these?

My code is shown below;

<Swiper className="swiperSlide"
  spaceBetween={100}
   autoplay Navigation Pagination
  onSlideChange={() => console.log('slide change')}
  onSwiper={(swiper) => console.log(swiper)}
>
  <SwiperSlide className="slide-image slider1"></SwiperSlide>
  <SwiperSlide className="slide-image slider2"></SwiperSlide>
  <SwiperSlide className="slide-image slider3"></SwiperSlide>
  <SwiperSlide className="slide-image slider4"></SwiperSlide>
</Swiper>

Is anyone able to provide an example of how I can get those to work? Please. Your help is much appreciated.

Swiper documentation: https://swiperjs.com/swiper-api#custom-build

CoderAz
  • 89
  • 4
  • 12
  • Does this answer your question? [React SwiperJs autoplay not making the swiper to auto swipe](https://stackoverflow.com/questions/63052586/react-swiperjs-autoplay-not-making-the-swiper-to-auto-swipe) – Hassan Imam Jun 12 '21 at 11:40

1 Answers1

0

Stated in their official site: swiperjs.com

By default Swiper React uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first. Here is the list of additional modules imports:

After you import modules, you also need to add:

SwiperCore.use([Navigation, Pagination, Scrollbar, Autoplay]);
saboshi69
  • 689
  • 5
  • 12