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是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
随机推荐
- java多线程实例
import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import java.util.concurr ...
- Scrapy简单入门及实例讲解-转载
Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...
- shell中交互输入自动化
shell中交互输入自动化 shell中有时我们需要交互,但是呢我们又不想每次从stdin输入,想让其自动化,这时我们就要使shell交互输入自动化了.这个功能很有用的哟.好好学习. 1 利用重 ...
- python使用外部PY文件的变量
在用python和selenium编写登录等脚本时,一直都是给用户名和密码直接赋值.但是考虑到这样不便于管理,而且可能多个地方用到同一个变量,所以想把变量放在一个单独的文件中进行管理. 以登录脚本为例 ...
- 快速上手Vue
课程目录: ES6常用语法 Vue基础以及指令 Vue组件 Vue-Router Vue生命周期 npm webpack vue-cli Vuex以及axios
- hover
hover - Bing dictionary US[ˈhɒvə(r)] v.盘旋:徘徊:犹豫:巡弋 网络翱翔:悬停:盘旋于
- SyntaxError: Non-ASCII character '\xe5' in file D:/pcode/xx.py on line 21, but no encoding declared
from selenium import webdriver from datetime import * import time starttime = datetime.now() print ( ...
- 使用Linux之安装jdk 7
工具/原料 jdk7源码安装压缩包 方法/步骤 卸载OpenJDK rpm -qa | grep java rpm -e --nodeps java-1.6.0-openjdk-1.6.0 ...
- 【D3D】Direct3D中LPRECT(上左右底)和LPoint(x,y)之前转换
D3DSprite.cpp void CD3DSprite::DrawText(CD3DFont *pFont, char *szString, RECT &DesRect, D3DCOLOR ...
- NGS的duplicate的问题
NGS的duplicate的问题 duplicate的三个问题: 一.什么是duplicate? 二.duplicate来源? 三.既然PCR将1个reads复制得到成百上千copies,那为什么 ...