vue中使用swipter遇到的问题，autoplay自动切换,和分页等无效

最新推荐文章于 2024-09-21 20:57:10 发布

小蔡来了

最新推荐文章于 2024-09-21 20:57:10 发布

阅读量855

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_48462578/article/details/115036611

版权

在Vue项目中使用Swiper组件时，遇到autoplay和分页功能失效的问题。通过在main.js文件中添加特定配置解决了该问题。官方文档中的autoplay设置在实际应用中未生效，需按以下方式调整才能正确实现自动切换和分页。

摘要由CSDN通过智能技术生成

vue中使用swipter遇到的问题，自动autoplay,和分页等无效

第一步
npm install swiper vue-awesome-swiper --save
cmd安装命令上述代码后


第二步
Vue在main.js中全局配置
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper)


第三步
新建一个vue文件组件，代码如下
<template>
  <swiper ref="mySwiper1" :options="swiperOptions">
    <swiper-slide v-for="(item,index) in imgs"><img :src="item.src"> </swiper-slide