Почему не работает autoplay в свайпере vue3

Question

Вроде все импортировал, и по документации по сути ничего дополнительного прописывать не надо, но все равно не работает.

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';


defineProps({
    slides: {
        type: Array,
        required: true,
    },
    imgUrl: {
        type: String,
        required: false,
    },
    imgAlt: {
        type: String,
        required: false,
    },
    imgUrlS: {
        type: String,
        required: false,
    },
    imgAltS: {
        type: String,
        required: false,
    },
})

</script>

<template>
    <section class="hero">
        <swiper class="hero__swiper" :slides-per-view="1" :autoplay="{ delay: 1000 }">
            <swiper-slide v-for="(slide, index) in slides" :key="index" class="hero__swiper-slide">
                <div class="hero__slide-content">
                    <img class="hero__img" :src="slide.imgUrl" :alt="slide.imgAlt">
                    <div class="hero__slide-overlay">
                        <img class="hero__img-title" :src="slide.imgUrlS" :alt="slide.imgAltS">
                        <a href="#" class="btn hero__button">Купить билет</a>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </section>
</template>

Answer 1

Проблему я сам решил в итоге:

Как решил:

в документации https://swiperjs.com/vue на самом верху страницы написаны рекомендации по переходу на Swiper 10. Если перейти по ссылке, то там будет новый способ подключения. Либо так же через npm, либо через script, вот если его подключить через script и поменять тег swiper, на swiper-container, то все заработает.

<template>
    <section class="hero">
        <swiper-container class="hero__swiper" :slides-per-view="1" :autoplay="{ delay: 3000 }">
            <swiper-slide v-for="(slide, index) in slides" :key="index" class="hero__swiper-slide">
                <div class="hero__slide-content">
                    <img class="hero__img" :src="slide.imgUrl" :alt="slide.imgAlt">
                    <div class="hero__slide-overlay">
                        <img class="hero__img-title" :src="slide.imgUrlS" :alt="slide.imgAltS">
                        <a href="#" class="btn hero__button">Купить билет</a>
                    </div>
                </div>
            </swiper-slide>
        </swiper-container>
    </section>
</template>

ничего импортировать не надо. Просто в index.html пишете script, как в документации и все. Все заработает.

А ведь просто надо внимательнее читать)

БЛОГ НА HUSL

Почему не работает autoplay в свайпере vue3

Ответы (1 шт):