因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度。通过调整js加载顺序,问题还是没有解决。

最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的,添加observer:true后问题解决!

 

var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal',
      loop: false,
      observer:true,//修改swiper自己或子元素时,自动初始化swiper

})

原文作者链接地址:https://www.cnblogs.com/demoworld/p/5977799.html

使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题的更多相关文章

  1. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  2. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

  3. iOS最笨的办法实现无限轮播图(网络加载)

    iOS最笨的办法实现无限轮播图(网络加载) 简单的做了一下: 使用方法: 把 请求返回的 图片地址(字符串类型)放进数组中就行 可以使用SDWebImage(我就是用的这个)等..需要自己导入并引用, ...

  4. Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

     Android Glide加载图片时转换为圆形.圆角.毛玻璃等图片效果 附录1简单介绍了Android开源的图片加载框架.在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬 ...

  5. 使用ajax预加载图片

    使用Ajax 上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法.该方法利用DOM,不仅仅预加载图片,还会预加载CSS.JavaScript等相关的东西.使用Ajax,比直接使 ...

  6. Android的ListView异步加载图片时,错位、重复、闪烁问题的分析及解决方法

    Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图 ...

  7. 微信小程序 加载图片时,先拉长,再恢复正常

    今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常 我的处理方法是,给他一个初始的height值,或者就直接 height:auto

  8. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  9. Swiper轮播插件使用

    前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果.                 归根到此,Swi ...

随机推荐

  1. 使用request.js代理post失败的问题

    前面写过一篇使用request.js做代理的文章,可能眼睛敏锐的朋友已经看出在代理POST方法时和代理其它请求方式是有区别的, 现在我来说一下为什么要这么处理. 相信很多人都采用这种方式去代理POST ...

  2. 了解ORACLE培训OCA-OCP-OCM课程表

    了解ORACLE培训OCA-OCP-OCM课程表考试号: OCA    1Z0-007$125    Oracle Database 10g:SQL Fundamentals 本课程培养学生必要的SQ ...

  3. 【GDKOI2017】 两个胖子萌萌哒 小学奥数题

    题目大意:给你一个$n\times m$的网格,你要在这个网格上画三角形. 三角形的顶点只能在网格的整点上,且至少有一条边平行于$x$或$y$轴,且三角形面积为整数.问你能画多少个不同的三角形. 两个 ...

  4. Ubuntu Cannot run program "../SDK/build-tools/xxx/aapt": erro = 2 No such file or directory

    64位ubuntu Android Studio  Gradle编译时出现如下报错: java.io.IOException: Cannot run program "/home/king/ ...

  5. IO概述、异常、File文件类_DAY19

    IO概述: 操作数据的工具 IO流,即数据流,数据像水流一样通过IO工具进行传输. 程序  <IO>   硬盘 绝对路径与相对路径 1:异常(理解) (1)就是程序的非正常情况. 异常相关 ...

  6. Storm原理及安装

    http://my.oschina.net/leejun2005/blog/147607 http://www.storm-geek.com/forum.php http://www.zhangjih ...

  7. Linux grep命令详解[备份]

    linux grep命令 1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressi ...

  8. oauth2.0实现sso单点登录的方式和相关代码

    SSO介绍 什么是SSO 百科:SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他 ...

  9. SpringBoot学习之自动装配

    在前面使用SSM集成时,我们可以使用注解实现无配置化注入,但是这种依赖被进行“人工干预了的”,换句话就是说我们手动进行装配,那么此时还没有达到SpringBoot这种自动装配的效果,那么究竟Sprin ...

  10. 利用System.IO.Compression操作压缩文件

    引用: using System.IO.Compression; using (FileStream zipToOpen = new FileStream(@"D:\json.zip&quo ...