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是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
随机推荐
- 微擎系统 微信支付 get_brand_wcpay_request:fail
支付授权目录问题,有一个是域名加app的
- 发布Maven项目 nexus
1.在pom.xml文件中配置需要发布的工厂 如果想把项目发布到nexus中,需要在pom.xml中配置releases和snapshots版本发布的具体repository <distribu ...
- sql重复数据只取一条记录
1.SQL SELECT DISTINCT 语句 在表中,可能会包含重复值.这并不成问题,不过,仅仅列出不同(distinct)的值. 关键词 DISTINCT 用于返回唯一不同的值. 语法: SEL ...
- focal
focal 美 ['foʊk(ə)l] 英 ['fəʊk(ə)l] adj.中心的:很重要的:焦点的:有焦点的 网络劲浪:在焦点上的:局部
- SpringMVC入门(基于XML方式实现)
----------------------siwuxie095 SpringMVC 入门(基于 XML 方式实现) (一)搭建 SpringMVC 环境 1.先下载相关库文件,下载链接: (1)ht ...
- IIS7web服务器调试ASP.net程序遇到的一些故障的解决办法
1. [由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面] 故障描述:[由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面] ...
- 搜索旋转排序数组 II
跟进“搜索旋转排序数组”,假如有重复元素又将如何? 一句话思路:不能二分,因为复杂度是n eg全是0,找一个1 class Solution { public boolean search(int[] ...
- php中错误处理机制
php中,异常处理机制是有限的,无法自动抛出异常,必须手动进行,并且内置异常有限. php把许多异常看作错误,这样就可以把这些异常想错误一样用set_error_handler接管,进而主动抛出异常. ...
- 批量去重URL地址并剔除打不开网址
#coding=utf-8 import os import httplib import socket dictlist ={}; def ReadHost(): hosts = []; obn = ...
- https://www.w3.org/
W3C W3C By Region All Australia Österreich (Austria) België (Belgium) Botswana Brasil (Brazil) 中国 ...