not working Autoplay swiper

[ghost]

I'd like to add autoplay swiper. added code is like this.

config: SwiperOptions = {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 3000,
    loop: true
  };

But it doesn't work to autoplay. please review it and let me know.

[ghost]

I found interesting thing. When I include the jquery.js, auto slider doesn't work. But if I comment it, autoplay works.

That's very fun and strange thing. what's the reason? I can't find it.... :(

[shavin47]

Did you find a solution to this?

[ghost]

not yet. @shavin47 do you have the same problem?

[shavin47]

Yes!

[dbedoyat]

Hi guys, the implmentation of autoplay is wrong. @shavin47 @ninjadev1030

The best way is:

autoplay: { delay: 3000, }, For more options see also: http://idangero.us/swiper/api/

[ghost]

@dbedoyat I tried it, but when I include the jquery.js file, the autoplay doesn't work. But remove it, it works.

[dbedoyat]

@ninjadev1030 Why use jQuery if you have angular core? Where you include jQuery? Try to put on Angular CLI file.

[ghost]

.angular-cli.json "script":[ "../node_modules/jquery/dist/jquery.min.js", ]

[ghost]

@dbedoyat it was not solved yet.

[Mathewkutty]

Any solution ?

[kjdeepak]

Hi guys, the implmentation of autoplay is wrong. @shavin47 @ninjadev1030

The best way is:

autoplay: { delay: 3000, }, For more options see also: http://idangero.us/swiper/api/

@dbedoyat The autoPlay parameter takes number type. So this cant be implemented I guess.

[abdessamadely]

Please make sure to import {Autoplay} module and make the swiper use it

import Swiper, { Autoplay} from 'swiper'; Swiper.use([Autoplay]);

[crawlinknetworks]

Thanks, yes, it is working in Agular 9.

[Teratec-Solutions]

Please make sure to import {Autoplay} module and make the swiper use it

import Swiper, { Autoplay} from 'swiper'; Swiper.use([Autoplay]);

it's working

[abdullahmehboob20s]

Hi guys, the implmentation of autoplay is wrong. @shavin47 @ninjadev1030

The best way is:

autoplay: { delay: 3000, }, For more options see also: http://idangero.us/swiper/api/

Thanks Mister , it worked , i was trying to solve it from 2 days , but it solved in 2 sec after trying your solution , i added delay : 100 in my case

[xieww-aries]

Please make sure to import {Autoplay} module and make the swiper use it

import Swiper, { Autoplay} from 'swiper'; Swiper.use([Autoplay]);

@abdessamadelhamdany Thanks a lot, it works, but i can see Swiper.use([...]) in the file whose path is node_modules/swiper/swiper-bundle.esm.js, and the version of the swiper i use is 7.3.2. I saw the main path in the package.json, but i also confused that do i need write Swiper.use everytime?

[sipamungkas]

Please make sure to import {Autoplay} module and make the swiper use it

import Swiper, { Autoplay} from 'swiper'; Swiper.use([Autoplay]);

in 2022, i found the issue in my project, and i Add this, its work like a charm Thank you very much

[riettotek]

implement the module in the parameter options like so modules: [Autoplay]:

const swiper = new Swiper(".gallery", {
    modules: [Autoplay],
    loop: true,
    autoplay: {
        delay: 3000,
        }
});

hope helps!

[AllanAndrade]

I fixed it with:

On import:

// ADD Autoplay on Swiper import
import Swiper, { Autoplay } from "swiper"; 

And on Swiper options:

 modules: [Autoplay],
 autoplay: {
      delay: 5000,
      pauseOnMouseEnter :true,
 },

I hope this helps someone!

[Mihir124]

i have try all but autoplay is not working give me another solution (i code in ionic framework)

[johnmckay-reward]

I couldn't get the AutoComplete module to work at all, so ended up implementing this myself, like so:

Pass the swiper instance to the component:

<swiper (swiper)="setSwiperInstance($event)">

Then in my component:

setSwiperInstance(swiper: Swiper) {
  setInterval(() => {
    swiper.slideNext();
  }, 3000);
}

Bit of a hack but it works :)

[ghost]

I am trying to get the autoPlay correct but haven't found anything yet. Currently using svelte to get the autoPlay on Mount but animation stops each time the page loads, it works only when the code is tweaked a bit, though the part that's being tweaked isn't related to swiper anyway.

Modules being imported -

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

And for the options.

slidesPerView={1}
    autoplay={{delay: 1 }}
    breakpoints={{
        1220:{
            slidesPerView:2
        }
    }}
    speed={5000}
    loop={true}
    modules={[Autoplay, Pagination, Navigation]}

[Silva-jr]

I couldn't get the AutoComplete module to work at all, so ended up implementing this myself, like so:

Pass the swiper instance to the component:

<swiper (swiper)="setSwiperInstance($event)">

Then in my component:

setSwiperInstance(swiper: Swiper) {
  setInterval(() => {
    swiper.slideNext();
  }, 3000);
}

Bit of a hack but it works :)

This solution it worked, Thank's man

[vasanthmn1]

import fist this Autoplay 'swiper/modules'

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

**SwiperCore.use([Autoplay]);**

config: SwiperOptions = {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 3000,
    loop: true
  };

refer 💚

[vasanthmn1]

install npm i swiper

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

config: SwiperOptions = {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 30,
    autoplay: 3000,
    loop: true
  };

refer https://swiperjs.com/react