jQuery -- Swiper插件使用ajax动态加载数据出现无法滑动的问题

最新推荐文章于 2023-11-16 09:28:50 发布

豆i浆

最新推荐文章于 2023-11-16 09:28:50 发布

阅读量1.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sinat_19327991/article/details/78272352

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

解决方法很简单，只需要在配置项中添加两个属性即可解决：

observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper

效果如图：

这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

豆i浆

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue中swiper初始化问题_vue中使用vue-awesome-swiper遇到的一些问题

weixin_33520865的博客

02-05

3204

最近开发pc官网，用到了轮播图，在这里记录一下使用过程中遇到的问题。之前用jquery开发项目的时候，用的是swiper3。现在用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过来，结果发现要不是下标小圆点失效，要不就是切换功能失效，不知道问题出在哪里。搞了很久，最后用了swiper3的使用方法。轮播图引入的版本是"vue-awesome-swiper": "^2...

Vue使用swiper的数据更新问题

SUE_DONG的博客

07-13

6297

问题描述在 Vue 中使用 ajax 请求循环展示轮播图分页器小圆点显示不全轮播图滑动出错解决方案 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.3.6/css/swiper.min.css" /> <div id="app"> <div class="swiper-container"> <div class="swiper-wrapper"&g

参与评论您还未登录，请先登录后发表或查看评论

Swiper踩坑ajax加载动态数据不能滑动

玲曦的博客

07-26

640

原因是没有初始化，动态数据并没有被swiper记录加载。通俗的讲,swiper不承认有这个数据，所以没法滑动解决： 1，在之前初始化时(还没请求数据)，给swiper加上属性 var scrollSwiper = new Swiper('.scroll', { observer:true, //修改swiper自己或子元素时，自动初始化swiper observeP...

swiper动态加载数据（踩坑）

CAO11021的博客

12-07

2866

html代码： <section> <div class="law_type"> <div class="swiper-container"> <div class="swiper-wrapper types"> </div> </div> </div> </s

Swiper组件异步请求数据-高度问题

Owen的博客

03-11

990

情况一、请求后高度不变 var mySwiper = new Swiper('.swiper-container', { autoHeight:true, observeParents:true, observer:true, } 情况二、请求后内容高度变化（不完美） var mySwiper = new ...

左右滚动jquery 插件 swiper

ISaiSai的专栏

06-25

1751

左右滚动jquery 插件 swiper http://www.swiper.com.cn/

jQuery手机端HTML5带农历日期选择插件jQuery移动端日历插件swiper.js

03-31

在这款插件中，jQuery是核心，用于快速地实现页面元素的交互和动态更新。其次，swiper.js是一个强大的触摸滑动组件，专为移动设备设计。它支持各种复杂的滑动布局，如轮播、网格和滚动导航。在这个万年历插件中，...

jQuery swiper水平左右滑动时间轴特效

06-10

在这个特定的“jQuery swiper水平左右滑动时间轴特效”中，我们看到的是一个优雅的方式，用于展示内容，使得用户可以通过水平滑动或者使用箭头按钮在时间轴上浏览信息。首先，我们要理解jQuery的基础。jQuery是一...

jQuery swiper水平左右滑动时间轴特效.zip

09-22

4. **jQuery插件**：虽然jQuery本身不包含滑动功能，但我们可以利用其强大的API自行实现或使用第三方插件，如Swiper.js。不过在这个案例中，我们将直接使用jQuery编写滑动逻辑。在文档加载完成后，我们需要监听用户...

使用swiper.js插件制作列表无缝匀速滚动效果

weixin_56927228的博客

01-13

3614

使用swiper.js插件制作列表无缝匀速滚动效果

Swiper.js实现无缝滚动

m0_52761651的博客

09-27

3786

swiper.js实现无缝滚动

jQuery.swiper插件

canvas_hua的博客

08-18

2429

zepto挺小的，个人觉得功能少，而且功能效果不好。我找了半天找到了swiper,它属于jQuery插件，滑动交互很好。

swiper.jquery 滑屏插件（3.0版）

weixin_34161029的博客

03-22

1387

2019独角兽企业重金招聘Python工程师标准>>> ...

swiper垂直方向全屏实现鼠标滚轮滚动一下切换一屏

最新发布

qq_44161722的博客

11-16

1362

【代码】swiper垂直方向全屏实现鼠标滚轮滚动一下切换一屏。

前端使用swiper的坑

douyiqing的博客

03-10

2008

1.动态渲染swiper左右切换按钮和滑动切换失效原因：这是因为ajax是个异步请求，当页面渲染完毕时，swiper插件没法获取最新的swiper-slide个数，导致部分功能失效。解决办法：在swiper初始化时设置下面属性 observer: true, //修改swiper自己或子元素时，自动初始化swiper observeParents: true //修改swiper的...

swiper jquery动态添加数据不滑动

lcb_vampire

03-18

1521

这种数据写死的方式，swiper轮播都是没有问题的，但是实际项目中，一般banner数据都是动态从服务器请求的，但是动态获取到banner之后，发现swiper不轮播，只显示一张静态图片：用elements查看，其实多条banner数据已经存在了，后来想到应该是异步获取数据时候，swiper已经加载完了，后来查看资料，“swiper的机制是：初始化的时候自动扫描swiper-wra...

swiper在进行动态数据加载时的应用和处理

qq_33616802的博客

08-21

1万+

最近在一个企业门户网站项目，要求做一个后台管理系统对前台门户网页的内容和网站结构进行一定程度修改，决定用swiper控件实现 banner广告位，因为之前也用过，比较熟悉，它比较轻量，一个banner需要的东西它都有，而且是基于Jquery的，官网链接如下: http://www.swiper.com.cn/api/basic/2016/0125/295.html swiper的初始

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

weixin_34326179的博客

07-19

1736

使用swiper.js做一些动效时，如果进行了ajax，并且重新把DOM写入到HTML代码中，会导致swiper.js的特效消失的问题、原因是ajax加载后，原先new 的Swiper对象，不认识新来的DOM对象，所以要把ajax之后的DOM也绑定到swiper的事件，就得重新声明Swiper对象，也就是重新声明Swiper对象。目前有两种解决方法：(第二种方法不成功) 1.在动态获取...

Swiper插件在移动端使用时踩过的坑