使用vue-awesome-swiper4.1.1不能自动轮播，配置无效

最新推荐文章于 2023-01-12 17:08:45 发布
最新推荐文章于 2023-01-12 17:08:45 发布
阅读量796 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyyo_cd/article/details/121533401
版权

按照官网步骤安装引入使用

配置autoplay: true,后发现配置无效，查了无数文档后，终于发现是swiper版本问题

swiper版本从7.x降到了5.x：

同时css需要根据文件夹目录修改引入

 

 配置写法：后台循环数据时需要设置observer

lyyo_cd
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用swiper_Vue使用轮播图不能自动播放？瞬间就不愉快了！！！
weixin_34439450的博客
01-14 2157
在使用Vue的时候，少不了轮播图的需求，然而当我高兴的一股脑安装插件后，出现了一个奇怪的现象：轮播图不自动播放。经过仔细查找资料证实，原来......?‍?用白话讲技术的打工人 - 小鲸在使用vue-awesome-swiper组件时，如果大家也碰到了和小鲸一样的问题：轮播图无法自动播放。那下面的几个方法，希望能帮大家解决之。本文章使用的依赖版本如下图：版本依赖01observer与ob...
vue-awesome-swiper插件使用
Jiang_XiaoBai007的博客
12-23 340
@swiper插件 vue-awesome-swiper插件 项目场景： vue-awesome-swiper> 例如：项目场景：在组件中展示,实现轮播效果 问题描述： 轮播图是需要几张图片进行轮流展示的,因为做页面商品展示,商品更新换代比较快,有时候做活动更新的比较频繁,这时候静态图片需要每次更换src,十分不便捷,且页面数据较多的时候很难找到对应的位置,需要动态绑定从后端请求回来的数据,图片等 原因分析： 静态图片需要每次更换src,十分不便捷,且页面数据较多的时候很难找到对应的位置, 解决方案：
vue-awesome-swiper 设置 loop:true 失效
不知名人士的博客
07-07 440
开始用本地数据，轮播正常；后来用接口数据，就不能循环轮播了。页面渲染的时候，数据未加载完成。当确保获取到数据后，再显示 swiper。 方法2、computed（该种方式更优雅，将逻辑性的代码写到computed） 和方法1 的原理是一样的，只是避免更多的逻辑直接写在 template 中。 方法3、init 初始化 swiper 组件 先获取到 swiper实例，拿到数据后再初始化 swiper实例。...
vue-awesome-swiper4 轮播无效问题
weixin_36508680的博客
12-31 344
vue-awesome-swiper4 轮播无效问题 最新版本出现轮播无效问题，其他功能正常。不管怎么调试和配置，始终无效。最后使用3.1.3版本才轮播正常。以下是安装步骤： cnpm i vue-awesome-swiper@3.1.3 --save 前端引入代码 <template> <div class="swiper"> <swiper ref="mySwiper" :options="swiperOptions"> <
vue-awesome-swiper
wangatong的博客
01-07 1417
vue3.0 npm install swiper vue-awesome-swiper --save vue2.0 npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save main.js中添加 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) import 'swiper/css/swiper.css'
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
12-12
当时用的是vue-cli-3 + ant-design-vue实现的页面，发现ant-design-vue里头有现成的Carousel组件可用，由于排期比较急，先暂时用这个实现了第一版，没有特效没有其他花里胡哨的展示。验收完第一版后，发现ant-design...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
vue引入新版 vue-awesome-swiper插件填坑问题
11-27
为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放？ 为什么我的vue-awesome-swiper没有？ 使用 引入（前面的步骤和往常一样） npm install vue-awesome-...
vue2中swiper6不能正常使用的解决
周百万的博客
01-12 1084
v-for依赖于state的数据，实例化必须在v--for获得数据，渲染完结构之后，才能正常使用swiper。注意：也可以在其他地方引入，但是在main.js中引入，所有的组件都能用swiper的样式。在mounted中设置一个定时器，两秒之后在实例化Swiper对象，解决异步问题。因为在结构加载完成之后，实例化Swiper才能生效。这里用一种笨方法来演示，主要是学习怎样引入。样式的引入，不是平常的引入，引入代码如下。注意：一定要引入这两个，少引入一个就不行。注意：一定要这样引入样式。
vue轮播图插件vue-awesome-swiper
08-28
主要为大家详细介绍了vue轮播图插件vue-awesome-swiper，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-awesome-swiper 4.1.1版本鼠标划上暂停的坑
weixin_49470245的博客
11-17 1657
大坑 因为swiper和vue-awesome-swiper的版本较多，如果使用最新的版本，或者两者版本差距较大，就容易掉进很多的坑里面，各种报错。切记，版本问题 "swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1", //这是我用得版本 首先，安装swiper和vue-awesome-swiper npm install swiper@5.4.5 --save-dev npm install vue-awesome-swiper@4.1.1 --save-
vue-awesome-swiper autoplay (自动轮播)不生效 解决 方案
gongzuoyongde的博客
11-30 5533
仅针对vue-awesome-swiper版本在4以上的 很多小伙伴引入的swiper版本都已经达到了4-6，发现autopaly按照之前的配置方式不生效。原因是：官方已经将autoplay单独的分离了出来，需要单独引入。话不多少，完整的配置方案和使用方法如下： // main.js文件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/swiper-bundle.min.css' Vue.use(VueAwesomeSwi
【VUE】vue-awesome-swiper 使用总结以及解决在vue中不自动轮播的问题
qq_39398332的博客
09-28 8302
1.首先安装    vue-awesome-swiper   (安装前首先按照nodejs,vue) npm install vue-awesome-swiper --save 2.在main.js中引入安装的依赖 import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/di...
Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
仙魁XAN
08-23 2万+
Vue 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，Vue 的轮播插件 vue-awesome-swiper ，并简单的使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。vue-awesome-swiper 是第一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便。swiper options 使用介绍:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发在GitHub上参考安装和使用对策教程。
vue轮播图插件vue-awesome-swiper及其常用属性
Pentoncos的博客
03-01 6509
为什么是Swiper？ Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 兼容问题：低版本的iOS只支持swiper3及以下 官网：swiper.com.cn ...
vue中swiper vue-awesome-swiper的使用方法和爬坑大法
热门推荐
zyf_baby的博客
07-08 8万+
vue中swiper vue-awesome-swiper的使用方法和爬坑大法由版本引起的一系列坑坑1坑2坑3正确的使用姿势：安装（指定版本）组件中使用 由版本引起的一系列坑 时间：2020.07.08（时间，版本很重要-坑的起源） 这两天在vue中使用swiper做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了） 按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅 ![在这里插入图片描述](https://img-blog.csdnimg.
vue使用vue-awesome-swiper轮播图不能正常滚动
韩大璐
01-08 3042
在使用vue-awesome-swiper插件写轮播图的时候遇到上图的问题。 问题描述：这是一个画廊（图片相册查看大图）功能，在父组件中调用这个个轮播图的子组件，并且在父组件中控制画廊组件的显示隐藏。功能都写好之后，发现这个子组件显示出来以后不能顺畅滑动。 解决方案： 在初始化轮播图的时候加上这两个配置项： observeParents: true, observer: tr...
Vue使用轮播图vue-awesome-swiper组件常用属性-swiper案例
JackieDYH的博客
08-16 2726
vue-awesome-swiper 安装 npm install vue-awesome-swiper@3 引用 /*全局引入*/ import VueAwesomeSwiper from 'vue-awesome-swiper'; import "swiper/dist/css/swiper.css"; //这里注意具体看使用的版本是否需要引入样式，以及具体位置 Vue.use(VueAwesomeSwiper, /* { default global options } */);
npm install swiper vue-awesome-swiper@4.1.1
最新发布
02-22
npm install swiper vue-awesome-swiper@4.1.1 是一个用于安装 Swiper 和 vue-awesome-swiper 版本为 4.1.1 的命令。Swiper 是一个流行的移动端触摸滑动插件，而 vue-awesome-swiper 是基于 Swiper 封装的适用于 Vue.js 的组件。 执行该命令后，npm 会自动下载并安装所需的依赖包。其中，swiper 是 Swiper 的核心库，vue-awesome-swiper 是 vue-awesome-swiper 组件的包装器。 安装完成后，你可以在项目中使用 Swiper 和 vue-awesome-swiper 来实现各种滑动效果，如轮播图、滑动导航等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值