因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度。通过调整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. Django(图书管理系统1)

    day63 内容回顾     1. 单表的增删改查         1. 删和改             1. GET请求 URL传值                 1. 格式            ...

  2. 看linux正在运行的服务用哪个命令?

    https://zhidao.baidu.com/question/117779006.html 查看服务进程:ps aux查看服务cpu利用:top查看服务对应端口:netstat -nlp pst ...

  3. php curl 伪造IP来源的实例代码

    来源:http://www.jb51.net/article/31694.htm curl 它不但可以模仿用户登录,还可以模仿用户IP地址哦,为伪造IP来源,本实例仅供参考哦 //伪造ip ; $i ...

  4. 2. Linear Model

    1. 基本形式 给定由$d$个属性描述的示例 $\textbf{x} =(x_1;x_2;...,x_n)$,其中$x_i$是$x$在第$i$个属性上的取值,线性模型(linear model)试图学 ...

  5. Python小白学习之路(二十)—【打开文件的模式二】【文件的其他操作】

    打开文件的模式(二) 对于非文本文件,我们只能使用b模式,"b"表示以字节的方式操作(而所有文件也都是以字节的形式存储的,使用这种模式无需考虑文本文件的字符编码.图片文件的jgp格 ...

  6. Oracle 数据库维护管理之--dbms_lock

    1.查询相关的v$视图,但是提示表或视图不存在解决办法     原因是使用的用户没有相关的查询权限导致 解决办法: grant select  any dictionary to 用户;    --这 ...

  7. javaWeb知识点学习(一)

    1.静态页面的传递过程 在静态WEB程序中,客户端使用WEB浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需 ...

  8. 使用Properties类和ResourceBundle类读取properties文件

    一.介绍: 项目中经常把一些常用的用户名和密码都填写到一个对应的配置文件中,这样每次修改密码或者用户名的时候就可以直接修改这个配置文件了,不用动源码. 这里讲两种方式读取properties文件的方法 ...

  9. (转)python函数: 内置函数

    原文:https://blog.csdn.net/pipisorry/article/details/44755423 https://juejin.im/post/5ae3ee096fb9a07aa ...

  10. yum安装报错:Failure when receiving data from the peer

    系统:Centos6.9 操作:yum install -y *.rpm 报错信息: Transaction Summary ===================================== ...