AutoPlay Slides not working for Swiper JS

Question

I am currently working with svelte to create a smooth auto slider using SwiperJs. It seems that I am unable to create that animation. When loading the page, the autoPlay dosen't seem to work. Below is the add-ons that got me to this :

<Swiper 
slidesPerView={2}
autoplay={{
    delay: 1,
    disableOnInteraction: false,
}}
speed={5000}
loop={true}
pagination={{
  clickable: true,
}}
navigation={true}
modules={[Autoplay, Pagination, Navigation]}
>

The contents in 3 slides are with different object reffered each time.

<SwiperSlide >
  <div class="workGridContainer">
    {#each workLinks as work}
      <div class="workCell {work.id}">
        <img class="workImg" src={work.imageLink} alt={work.id} />
        <h2 class="gridTitle">{work.title}</h2>
        <p>{work.description}</p>
        <a href={work.source} target="blank">Visit</a>
      </div>
    {/each}
 </div>
<SwiperSlide />

And I am Importing Modules such as

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

Blessing

Please provide enough code so others can better understand or reproduce the problem. – Bewick

Answer 1

You just want to use this :

import Swiper, { Autoplay, Navigation, Pagination } from 'swiper';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination, Autoplay]);

It worked for me.

Unappealable

Answer 2

I see that you are giving a delay of 1. But the delay is given in milliseconds, so you are basically trying to play the Swiper each millisecond, which is obviously too fast.

If you want it to play each second, then you should write 1000 instead of 1:

<Swiper 
  slidesPerView={2}
  autoplay={{
    delay: 1000,
    disableOnInteraction: false,
  }}
  speed={5000}
  loop={true}
  pagination={{
  clickable: true,
  }}
  navigation={true}
  modules={[Autoplay, Pagination, Navigation]}
>

I hope this helps you!

Haldeman

Thanks For the suggestion, but what I am looking is for no delay between the slides. And giving a delay of 1000 which means it will halt for that time before moving on to next slide. – Blessing

@PaperPot Well, them it seems to me your question wasn't clear enough. You're giving a delay of 1 millisecond, swiper can't swipe that fast. – Haldeman

Answer 3

React:

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

<Swiper
    modules={[Autoplay]}
    autoplay={{ delay: 1000, disableOnInteraction: false }}
    allowTouchMove={false}
    slidesPerView="auto"
    loop
  >
    {cards.map((card, index) => (
        <SwiperSlide key={index}>
            ...

Sweeten

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Bewick

Answer 4

For me it worked that way.

:modules="modules"

...

import { Swiper, SwiperSlide } from 'swiper/vue'; import SwiperCore, { Autoplay, Navigation, Pagination } from 'swiper/core';

     

...

setup() { return { modules: [Navigation, Pagination, Autoplay], }; },

Sulemasulf