最近在开发时需要用到轮播效果,想着用swiper实现一下,一看官网,都更新到8了,看了官网跟着配置了一下,发现根本不能用......
因为Swiper8已经更新好多次了,官网的示例的引入路径也早已经在最新版做了改变,但是官网没有更新,我们需要去看node_modules中swiper具体的路径
废话不多说,开始
版本说明: 先在你的项目中直接使用,如果不行再更新指定的版本
//卸载vue
npm uninstall vue
//安装指定版本
npm install vue@3.2.33
//卸载swiper
npm uninstall swiper
//安装指定版本
npm install swiper@3.2.33
"swiper": "^8.1.6",
"vue": "^3.2.33",
<template>
<swiper
:modules="modules"
:pagination="{ clickable: true }"
:autoplay="autoplayOptions"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</swiper-slide>
</swiper>
</template>
<script lang="ts" setup>
//这里就是更新后的路径,以前是import { Swiper, SwiperSlide } from 'swiper/vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import { Pagination, A11y, Autoplay } from 'swiper'
//这里就是更新后的路径,以前是import 'swiper/css'
import 'swiper/swiper.min.css'
//自动轮播的配置
const autoplayOptions = {
delay: 500,
disableOnInteraction: false,
loop: false,
pauseOnMouseEnter: true,
reverseDirection: true
}
const onSwiper = (swiper: any) => {
console.log(swiper)
}
const onSlideChange = (e) => {
// swiper切换的时候执行的方法
console.log('slide change', e.activeIndex)
}
const modules = [Pagination, A11y, Autoplay]
</script>
<style lang="less" scoped>
.swiper {
.swiper-slide {
height: 200px;
}
}
</style>
好了,刷新页面效果就有了