javascript - AutoPlay Slides not working for Swiper JS - Stack Overflow

admin管理员组

文章数量:1183185

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

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

• javascript
• animation
• slider
• svelte
• swiper.js

Share Improve this question Follow edited Aug 31, 2022 at 3:44 Paper Pot asked Aug 29, 2022 at 5:26 Paper PotPaper Pot 7111 gold badge11 silver badge55 bronze badges 1

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Aug 29, 2022 at 10:51

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 22

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.

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!

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

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], }; },

In 2024, This worked for me.

import Swiper from 'swiper';
import { Autoplay, Navigation, Pagination } from 'swiper/modules';

Swiper.use([Autoplay, Navigation, Pagination]);

本文标签： javascriptAutoPlay Slides not working for Swiper JSStack Overflow