坑是不同版本的swiper 引用css的路径不一样,自己去node_modules里查看,更改路径,之前用这个版本写的的时候官网写的还很清楚,这次又用发现文档不清楚了,所以就扒了之前写的代码的版本号
npm install swiper@5.2.0 --save-dev
npm install vue-awesome-swiper@4 --save-dev`
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
components: {
Treeselect,
Swiper,
SwiperSlide,
},
directives: {
swiper: directive,
},
swiperOptions: {
pagination: {
el: ".swiper-pagination",
},
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 3000, //时间 毫秒
disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
},
// Some Swiper option/callback...
},
<div>
<swiper ref="mySwiper" :options="swiperOptions">
<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>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>