自动播放幻灯片不适用于 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";

Answer 1

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!