安装swiper
npm install swiper@4 --save -dev npm install vue-awesome-swiper@3 --save-dev
使用swiper
<template><div class="swiper-container"><swiper :options="swiperOption"><swiper-slide v-for="(slide, index) in slides" :key="index"><img :src="slide" :alt="'Slide ' + (index + 1)" /></swiper-slide><!-- 如果需要分页器 --><div class="swiper-pagination" slot="pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-next" slot="button-next"></div><div class="swiper-button-prev" slot="button-prev"></div></swiper></div>
</template><script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'export default {components: {swiper,swiperSlide},data() {return {swiperOption: {// Swiper 配置项pagination: {el: '.swiper-pagination',clickable: true,},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},loop: true, // 循环模式选项autoplay: {delay: 3000,disableOnInteraction: false,},},slides: ['https://example.com/slide1.jpg','https://example.com/slide2.jpg','https://example.com/slide3.jpg',],}},
}
</script><style>
.swiper-container {width: 100%;height: 100%;
}
.swiper-slide img {width: 100%;height: auto;display: block;
}
</style>
