安装swiper
npm i swiper
使用分页器pagination
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
import SwiperCore, {
Autoplay,
EffectCoverflow,
Navigation,
Pagination
} from 'swiper' // 这是分页器和对应方法,swiper好像在6的时候就已经分离了分页器和一些其他工具
import 'swiper/swiper.min.css'
import 'swiper/css/pagination'
SwiperCore.use([EffectCoverflow, Autoplay, Navigation, Pagination])
...
...
...
// components: { Swiper, SwiperSlide },
会报错:
This dependency was not found:
swiper/css/pagination in ./node_modules/cache-loader/dist/cjs.js??ref–14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref–14-2!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader-v16/dist??ref–0-1!./src/views/home.vue?vue&type=script&lang=ts
To install it, you can run: npm install --save swiper/css/pagination
Error from chokidar (D:): Error: EBUSY: resource busy or locked, lstat ‘D:\DumpStack.log.tmp’
因为,装6.0+
版本的话需要引入另外一个css
正确写法:import 'swiper/css/pagination'
要改为 import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
import SwiperCore, {
Autoplay,
EffectCoverflow,
Navigation,
Pagination
} from 'swiper' // 这是分页器和对应方法,swiper好像在6的时候就已经分离了分页器和一些其他工具
//import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.css' // 而且也不需要import 'swiper/swiper.min.css'
SwiperCore.use([EffectCoverflow, Autoplay, Navigation, Pagination])
...
...
...
// components: { Swiper, SwiperSlide },
使用自动切换autoplay+自定义分页器navigation
<swiper
class="swiper_box"
:loop="swiperOptions.loop"
:autoplay="swiperOptions.autoplay"
:navigation="swiperOptions.navigation"
@swiper="onSwiper"
@slideChange="onSlideChange"
:slidesPerView="swiperOptions.slidesPerView"
:centeredSlides="swiperOptions.centeredSlides"
:coverflowEffect="swiperOptions.coverflowEffect"
:speed="swiperOptions.speed"
:delay="swiperOptions.delay"
:spaceBetween="swiperOptions.spaceBetween"
:pagination="{ clickable: true }"
v-if="swiperShow"
>
<swiper-slide
class="swiper_box_slide"
v-for="(item, index) in swiperList"
:key="index"
>
<img :src="item.fImageUrl" alt="" />
</swiper-slide>
</swiper>
<!-- 前进/后退 -->
<button class="next_btn">next</button>
<button class="pre_btn">prev</button>
...
...
...
const swiperOptions = reactive({
slidesPerView: 'auto', // 解决最后一张切换到第一张中间的空白
spaceBetween: 20,
centeredSlides: true, // 设置slide居中
effect: 'coverflow',
coverflowEffect: {
rotate: 0,
depth: 0,
slideShadows: false
},
navigation: {
nextEl: '.next_btn',
prevEl: '.pre_btn'
}, // 自定义分页器
autoplay: {
delay: 1000, // 自动切换的时间间隔
disableOnInteraction: true // 用户操作swiper之后,是否禁止autoplay
},
loop: true, // 开启循环
speed: 800, // 切换速度
clickable: true // 是否开启分页器
})
navigation的设置是:nextEl
和prevEl