<template>
<swiper :spaceBetween="30" :centeredSlides="true" :autoplay='{
? "delay": 2500,
? "disableOnInteraction": false
}' :pagination='{
? "clickable": true
}' :navigation="true" class="mySwiper">
? <swiper-slide>Slide 1</swiper-slide><swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide><swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide><swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide><swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
? </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import "swiper/css/pagination"
import "swiper/css/navigation"
import './style.css';
// import Swiper core and required modules
import SwiperCore, {
? Autoplay,Pagination,Navigation
} from 'swiper';
// install Swiper modules
SwiperCore.use([Autoplay,Pagination,Navigation]);
export default {
? components: {
? ? Swiper,
? ? SwiperSlide,
? },
? data() {
? ? return {
? ? };
? },
? methods: {
? }
}
</script>
轉(zhuǎn)自swiper官方文檔
