swipe js bug
最近因为要写新的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的更多相关文章
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- swipe js dynamic content
swipe js dynamic content swipe 动态改变内容时,需要用 update 一下. swiper.update(true); 实例: HTML Code 页面用的FreeMa ...
- swipe.js文档及用法
最近的一个项目中使用到了swipe.js这个插件 感觉非常的好用的 官方网站 http://swipejs.com/ https://github.com/bradbirdsall/Swipe 简介 ...
- Swipe JS滑动插件
Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...
- swipe.js实现支持手拔与自动切换的图片轮播
一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div cla ...
- 【转载】移动开发中的上下左右滑动插件jquery.swipe.js
原文地址http://blog.csdn.net/pvfhv/article/details/3449803/# 源码: (function($) { var old = $.fn.swipe; $. ...
- 基于zepto使用swipe.js制作轮播图demo
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
随机推荐
- python处理分隔大文件
4个.sql格式的文件,2G大小,直接插入mysql数据中,文件太大了,导入不进去. 太大的文件用python处理也很麻烦,处理不了,只能先分隔成小文件处理. 文件中数据格式:其中values里面的数 ...
- PCA原理(转)
PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...
- KNN识别手写数字
一.问题描述 手写数字被存储在EXCEL表格中,行表示一个数字的标签和该数字的像素值,有多少行就有多少个样本. 一共42000个样本 二.KNN KNN最邻近规则,主要应用领域是对未知事物的识别,即判 ...
- 正向工程configuration配置连接
在执行正向工程的时候需要用到这个关键词里面的configure();方法, 这个方法有好几个重构, 都是参数不一样的, 也可以空着不写, 不写的话就会默认去找hibernate.cfg.xml这个文件 ...
- The Last Stand
The Last Stand https://ac.nowcoder.com/acm/contest/303/L 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语 ...
- HttpClient(一)
package com.cmy.httpClient; import org.apache.commons.httpclient.HttpClient; import org.apache.commo ...
- MyBatis一对一查询
---------------------siwuxie095 MyBatis 一对一查询 以订单和用户为例,即 相对订 ...
- 转)ubuntu安装clang
主要参考:http://blog.csdn.net/firebird321/article/details/48528569 1.下载源码 去http://llvm.org/releases/down ...
- 6-Linux 上mysql的常用命令 以及 tomcat的相关指定
mysql -u root -p 进入Mysql //注意一下有逗号!!! show databases; //显示所有的数据库 drop database mydb; // 删除mydb这个数据库 ...
- php单点登陆简单实现 (iframe方式)
有四个网站分别为: www.a.com www.b.com www.c.com www.sso.com 需求是如果我们在sso登陆后,其他网站也会显示登陆中,不需要重复登陆,退出时,其他网站也会失效. ...