0

I create a slider in my html page with SwiperJS and display in my page correctly:

<div class="swiper">
    <div class="swiper-wrapper">
        <a class="swiper-slide" href="#"><img src="../src/images/1.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/2.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/3.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/4.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/5.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/6.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/7.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/8.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/9.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/10.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/11.svg"></a>
        <a class="swiper-slide" href="#"><img src="../src/images/12.svg"></a>
    </div>
</div>

and js code is:

'use strict';
import { Controller } from '@hotwired/stimulus';
import Swiper from 'swiper';
import 'swiper/css';

export default class extends Controller {
    connect() {
        const swiper = new Swiper('.swiper', {
            loop: true,
            slidesPerView: 8,
            spaceBetween: 30,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
        });
    }
}

I can swipe slider but autoplay not work . how can I fix this problem?

RSD
  • 87
  • 9

1 Answers1

1

You missed to import something

import {Swiper, SwiperSlide} from "swiper";
import SwiperCore, {Autoplay} from "swiper";
Mushfiqur Rahman
  • 376
  • 1
  • 2
  • 15