最近因为要写新的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. input:file属性

    1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png ...

  2. vs2015安装出问题

    win7系统需要更新serverpage1包,更新完就ok了,ie不用升级到ie10

  3. joinablequeue模块 生产者消费者模型 Manager模块 进程池 管道

    一.生产者消费者 主要是为解耦(借助队列来实现生产者消费者模型) import queue  # 不能进行多进程之间的数据传输 (1)from multiprocessing import Queue ...

  4. VCP考试系统

      题目的格式如下,题目和题目之间用“==”隔开,每个题目的“题干”,“选项”,“答案”用“*”号隔开 An administrator wants to provide users restrict ...

  5. Volley下载图片存放在data/data下 networkImageView lrucache

    networkImageView 设置图片的方法  (有效) imageView.setImageUrl("https://www.baidu.com/img/bd_logo1.png&qu ...

  6. discuz回贴通知插件实现-发送邮件

    通过discuz的sendmail()来发送邮件 //引入发送邮件的函数文件 include libfile('function/mail'); //设置收件人地址,标题,内容发送邮件 sendmai ...

  7. struts框架值栈问题七之EL表达式也会获取到值栈中的数据

    7. 问题七:为什么EL也能访问值栈中的数据? * StrutsPreparedAndExecuteFilter的doFilter代码中 request = prepare.wrapRequest(r ...

  8. .zip/.rar打包与解压

    Linux下如何解压.zip和.rar文件,对于Window下的常见压缩文件.zip和.rar,Linux也有相应的方法来解压它们: 1)对于zip linux下提供了zip和unzip程序,zip是 ...

  9. 解决lhgDialog插件在IE11浏览器的BUG

    项目中用到一款lhgDialog插件,最近在Win7系统IE11浏览器打上最新补丁(KB4012204)后,对话框内容的高度变成默认高度,经过调试,修改了lhgDialog里的iframe高度,问题解 ...

  10. 750A New Year and Hurry

    A. New Year and Hurry time limit per test 1 second memory limit per test 256 megabytes input standar ...