Swiper: Autoplay not working in latest version

Created on 27 Jul 2020 · 5Comments · Source: nolimits4web/swiper

This is a (multiple allowed):

[x] bug
[ ] enhancement
[ ] feature-discussion (RFC)

Swiper Version: 6.0.4
Platform/Target and Browser Versions: macOS
Live Link or JSFiddle/Codepen or website with isssue: -

What you did

new Swiper('.page-header__slides', {
    wrapperClass: 'page-header__slider-wrapper',
    slideClass: 'page-header__slide',
    autoplay: {
        delay: 5000,
        disableOnInteraction: false
    },
    loop: true,
});

Autoplay doesn't work, in older versions it does work with this exact code, I downgraded

Expected Behavior

Autoplaying

Actual Behavior

Not autoplaying

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow
for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

BTW I love this package, I use it A LOT💕

Source

Sidstumple

Most helpful comment

You need to use Swiper bundle version or install Swiper's Autoplay module (if you use core version) https://swiperjs.com/get-started/

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

nolimits4web on 27 Jul 2020

👍2 ❤1

All 5 comments

You need to use Swiper bundle version or install Swiper's Autoplay module (if you use core version) https://swiperjs.com/get-started/

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

nolimits4web on 27 Jul 2020

👍2 ❤1

You need to use Swiper bundle version or install Swiper's Autoplay module (if you use core version) https://swiperjs.com/get-started/

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:

I spent several hours until I found this issue. Thanks!

akimov-anton on 31 Jul 2020

I have autoplay imported as per the docs and still autoplay is not working:

// Imports
// ------
import React from 'react';
import Slide from './Slide';
import SwiperCore, { Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';


// Styles
// ------
import 'swiper/swiper.scss';
import {
    Jacket,
    TitleJacket,
    Title,
} from './styles';

// Component
// ------
SwiperCore.use([Autoplay]);

const NoeSection = ({ isLast, title, content, speed }) => {
    const settings = {
        slidesPerView: 1,
        speed: 500,
        loop: true,
        breakpoints: {
            768: {
                slidesPerView: 2,
            },
            1024: {
                slidesPerView: 3,
                autoplay: {
                    delay: 200,
                },
            }
        }
    }

    return (
        <Jacket isLast={isLast}>
            <Swiper {...settings}>
                {content.map(({ title, image, description }, i) => (
                    <SwiperSlide key={title + i}>
                        <Slide
                            image={image.fluid}
                            title={title}
                            desc={description}
                        />
                    </SwiperSlide>
                ))}
            </Swiper>
        </Jacket>
    );
}

export default React.memo(NoeSection);