<swiper
:modules="modules"
:slides-per-view="1"
:space-between="50"
:pagination="{ clickable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
:autoplay="{
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: true,
}"
:speed="8000"
Lazy
Virtual
loop
loopPreventsSlide
>
<swiper-slide><img src="" alt="" loading="lazy" /></swiper-slide>
<swiper-slide><img src="" alt="" loading="lazy" /></swiper-slide>
<swiper-slide><img src="" alt="" loading="lazy" /></swiper-slide>
</swiper>
import { Navigation, Pagination, A11y, Autoplay, Lazy, Virtual } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/lazy";
components: {
Swiper,
SwiperSlide,
},
const onSwiper = (swiper) => {
};
const onSlideChange = () => {
};
return {
modules: [Navigation, Pagination, A11y, Autoplay, Lazy, Virtual],
};
:deep(.swiper-wrapper) {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}