最近因为要写新的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. 删除临时表空间ora-25152错误

    删除临时表空间,或者收缩临时表空间经常会出现表空间占用等情况. 下面我们就对这种情况进行处理, 首先查找被锁的sid: SELECT a.INST_ID,b.TABLESPACE , b.segfil ...

  2. Chi-Square Statistic/Distribution

    . 1.What is a Chi Square Test? 卡方检验有两种类型.两者使用卡方统计量和分布的目的不同. 第一种:卡方拟合优度检验确定样本数据是否与总体匹配.(这里不介绍) 第二种:独立 ...

  3. 使用js获取伪元素的content

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...

  4. python,遍历文件的方法

    在做验证码识别时,识别时需要和库里的图片对比,找到最接近的那个图片,然后就行到了用与图片一致的字符命名,获取文件的名称,去将图片的名称读出来作为验证码.以下是我通过网上的资料总结的三种文件遍历的方式, ...

  5. java实现24点游戏代码

    import java.util.Arrays;import java.util.Scanner; public class Test07 {    public static void main(S ...

  6. LibreOJ 6277 数列分块入门 1(分块)

    题解:感谢hzwer学长和loj让本蒟蒻能够找到如此合适的入门题做. 这是一道非常标准的分块模板题,本来用打标记的线段树不知道要写多少行,但是分块只有这么几行,极其高妙. 代码如下: #include ...

  7. 未能加载文件或程序集“AjaxControlToolkit”或它的某一个依赖项

    对于这个问题,网上的解答都大同小异,最多的就是Bin文件夹下没有dll文件,引用路径问题.但我碰到的问题偏偏不是这个,而是没有一个人给出方法的问题.其实问题很简单,也很低级:IIS上发布网站的时候把整 ...

  8. 【校招面试 之 剑指offer】第16题 数值的整数次方

    方法1:直接求解,但是要注意特殊情况的处理:即当指数为负,且底数为0的情况. #include<iostream> using namespace std; template<typ ...

  9. hadoop应用场景总结

    原文地址 我个人接触hadoop仅仅不到一年,因为是业余时间学习,故进度较慢,看过好多视频,买过好多书,学过基本知识,搭建过伪分布式集群,有过简单的教程式开发,恰逢毕业季,面试过相关岗位,自认为路还很 ...

  10. spring开发Eclipse需要做设置

    1. 统一工作空间的编码,选择UTF-8 2. 把创建JSP页面的编码修改UTF-8 3. 重新配置Tomcat服务器 * 先配置Tomcat服务器 * 选择服务器 --> open --> ...