最近因为要写新的mobile site页面,有好几个页面上面必须用到photo slider。

使用插件:

/*
 * Swipe 2.0
 *
 * Brad Birdsall
 * Copyright 2013, MIT License
 *
*/

Github:https://github.com/thebird/Swipe

在使用的时候,发现只要是在两张照片的情况下,你会在chrome的F12调试中的Elements选项中发现swipe js使用js动态创建出来了4个div,这里是使用如下的代码:

  <div id='mySwipe' style='max-width:500px;margin:0 auto;padding-top:0px;' class='swipe'>
<div class='swipe-wrap'>
__(foreach from=$all_content_information item=content_information)__
__(if $content_information.content_type == "image")__
<div>
<img src="__($host_application_prefix)____($content_information.fields.image.value)__" style="width:100%;height:280px;" />
</div>
__(/if)__
__(/foreach)__
  </div>
</div>

那个调试的就不截图了,但是你使用Ctrl+u查看源代码就会发现源代码中的图片数是正确的。所以模板当中不存在条件判断失误的问题了,只能是在swipe js中出现问题。

于是,顺藤摸瓜,打开swipe.js文件后,如果在Line 47-Line 53就发现了那一段在处理两张图片时候的代码。

 //Source codes:
if (browser.transitions && options.continuous && slides.length < 3) {
element.appendChild(slides[0].cloneNode(true));
element.appendChild(element.children[1].cloneNode(true));
slides = element.children;
} //Modified codes: //special case if two slides
if (browser.transitions && options.continuous && slides.length < 3) {
//element.appendChild(slides[0].cloneNode(true));
//element.appendChild(element.children[1].cloneNode(true));
//slides = element.children;
}

不想知道根源的,只需要将那个if注销就好了。

swipe js bug的更多相关文章

  1. swipe.js 2.0 轻量级框架实现mobile web 左右滑动

    属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...

  2. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  3. swipe js dynamic content

    swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code  页面用的FreeMa ...

  4. swipe.js文档及用法

    最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的 官方网站 http://swipejs.com/ https://github.com/bradbirdsall/Swipe 简介 ...

  5. Swipe JS滑动插件

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...

  6. swipe.js实现支持手拔与自动切换的图片轮播

    一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div cla ...

  7. 【转载】移动开发中的上下左右滑动插件jquery.swipe.js

    原文地址http://blog.csdn.net/pvfhv/article/details/3449803/# 源码: (function($) { var old = $.fn.swipe; $. ...

  8. 基于zepto使用swipe.js制作轮播图demo

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...

  9. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

随机推荐

  1. JDK中rt.jar、tools.jar和dt.jar作用

    dt.jar和tools.jar位于:{Java_Home}/lib/下,而rt.jar位于:{Java_Home}/jre/lib/下,其中: rt.jar是JAVA基础类库,也就是你在java d ...

  2. selenium常用的断言

    断言: 验证应用程序的状态是否同期望的一致,常见的断言包括验证页面内容,如标题是否与预期一致,当前的位置是否正确等等 断言常被用的4种模式+5种手段:Assert 断言失败的时候,该测试终止 veri ...

  3. Web标准:九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

  4. java和数据结构的面试考点

    目标:不要有主要的逻辑错误.2遍以内bug free.注意代码风格 不要让面试官觉得不懂规矩 Java vs C++ Abstract class vs interface  pass by refe ...

  5. 二叉树查找树中序后继 · Inorder Successor in Binary Search Tree

    [抄题]: 给一个二叉查找树以及一个节点,求该节点的中序遍历后继,如果没有返回null [思维问题]: 不知道分合算法和后序节点有什么关系:直接return表达式就行了,它自己会终止的. [一句话思路 ...

  6. [leetcode]318. Maximum Product of Word Lengths单词长度最大乘积

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  7. Python学习记录day7

    目录 Python学习记录day7 1. 面向过程 VS 面向对象 编程范式 2. 面向对象特性 3. 类的定义.构造函数和公有属性 4. 类的析构函数 5. 类的继承 6. 经典类vs新式类 7. ...

  8. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  9. 利用ks构建ISO中的一些坑

    构建ISO的基本流程 1.获取rpm包源码 2.将源码增量编译成二进制包 3.编写ks的包列表决定ISO制作时需要从什么地方(二进制仓库repo)取哪些二进制包 4.通过createiso命令并指定k ...

  10. [SoapUI] 设置HTTP Request的Header

    import com.eviware.soapui.support.types.StringToStringMap def hearderMap = new StringToStringMap() d ...