1.对应的Swiper版本是6.7.0
2.在需要使用的vue导入swiper组件
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
// import Swiper core and required modules
import SwiperCore, { Navigation, Virtual, Autoplay, Pagination, A11y, EffectFade } from 'swiper'
// Import Swiper styles
import 'swiper/swiper.scss'
import 'swiper/components/navigation/navigation.scss'
import 'swiper/components/pagination/pagination.scss'
import 'swiper/components/scrollbar/scrollbar.scss'
SwiperCore.use([Navigation, Virtual, Autoplay, Pagination, A11y, EffectFade])
3.引用swiper组件
components: {
Swiper,
SwiperSlide
},
4.与components同级添加setup
setup () {
return {
modules: [Navigation, EffectFade, A11y],
}
},
5.
<swiper
:modules="modules"
:slides-per-view="4"
:space-between="26"
navigation
loop: true
:autoplay="{
autoplay: true,
delay: 3000,
pauseOnMouseEnter:true,//鼠标进入暂停,离开继续
disableOnInteraction:false
}"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange="onSlideChange"
@slideChangeTransitionStart="slideChangeTransitionStart"
@setTranslate="setTranslate"
@onSetTransition="onSetTransition"
@progress="onProgress"
>
<swiper-slide
v-for="(item, index) in ipLists"
:key="index" class="swiper-slide-item">
<span >{{index}}</span >
</swiper-slide>
</swiper>
</div>