swipe js dynamic content
swipe js dynamic content
swipe 动态改变内容时,需要用 update 一下。
swiper.update(true);
实例:
HTML Code
页面用的FreeMarker渲染
<div class="swiper-container swiper-container-horizontal"> <ul class="swiper-wrapper"> <#if goods.productImages?has_content> <#list goods.productImages as productImage> <li pid="${productImage.productId}" class="swiper-slide"> <img src="${productImage.source}" alt=""> </li> </#list> </#if> </ul> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> </div></div><script> var swiper = new Swiper('.mSwiper .swiper-container', { pagination: '.mSwiper .swiper-pagination', paginationClickable: true });</script>
JavaScript Code
// 商品图片联动 var changeProductImage = function(productId){ // 重新加载图片 var $showProductImage = $("ul.swiper-wrapper"); $showProductImage.empty(); for (var i = 0; i < productImages.length; i++) { $showProductImage.append("<li pid=\""+productImages[i].productId+"\" class=\"swiper-slide\" style=\"width: 640px;\">"+ "<img src=\""+productImages[i].source+"\" alt=\"\"></li>"); } // 更新图片轮播 swiper.update(true); };
注:主要用于商品图片展示,当选择不同颜色的商品,商品图片要替换。
swipe js dynamic content的更多相关文章
- swipe.js 2.0 轻量级框架实现mobile web 左右滑动
属性总结笔记如下: <style> .swipe { overflow: hidden; //隐藏溢出 清楚浮动 visibility: hidden; //规定元素不可见 (可以设置,当 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- Swipe JS – 移动WEB页面内容触摸滑动类库
想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...
- 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 ...
- swipe js bug
最近因为要写新的mobile site页面,有好几个页面上面必须用到photo slider. 使用插件: /* * Swipe 2.0 * * Brad Birdsall * Copyright 2 ...
- 【转载】移动开发中的上下左右滑动插件jquery.swipe.js
原文地址http://blog.csdn.net/pvfhv/article/details/3449803/# 源码: (function($) { var old = $.fn.swipe; $. ...
- 基于zepto使用swipe.js制作轮播图demo
在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用 它是一个纯javascript工具,不需 ...
随机推荐
- JavaScript 正则表达式提取感兴趣的字符串
var tdid="gov_sslim"; var reg=/(\w+)lim/; var name=tdid.match(reg); console.log(name[1]); ...
- VS问题汇总——竹子整理
VS这个宇宙第一IDE有时候也会淘气一把,此贴记录下日后遇到的VS本身的问题 1.VS显示正忙!!!其他项目能打开,就这个不行,关闭vs进程重启vs还是无法解决. 这个问题从VS2010开始就遇到过, ...
- 用Qt写软件系列四:定制个性化系统托盘菜单
导读 一款流行的软件,往往会在功能渐趋完善的时候,通过改善交互界面来提高用户体验.毕竟,就算再牛逼的产品,躲藏在糟糕的用户界面之后总会让用户心生不满.界面设计需综合考虑审美学.心理学.设计学等多因素, ...
- 【C#】OOP之多态那点事
前言: 对菜鸟开发者的忠告:花一万个小时练习 Coding,不要浪费一万小时无谓地 Debugging(也就说看代码) 看上面的UML图,我们创建一个抽象的Instrument类,类中有一个抽象方法p ...
- 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中
摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...
- wpf 自定义消息框
相信很多人用过MessageBox.show(),是不是觉得这个消息框有点丑呢,反正我是觉得有点丑的,所以我自己重写了一个.先不说,上两幅图对比先: 当然,也不是很好看,不过比原有的好多了. 不多说了 ...
- FreeBSD暂时用9.X系列为宜
今天尝试在FreeBSD10 上编译c代码,发现gcc被换成llvm后,环境配置需要重新学习.
- 二、SQL语句映射文件(1)resultMap
//备注:该博客引自:http://limingnihao.iteye.com/blog/106076 SQL 映射XML 文件是所有sql语句放置的地方.需要定义一个workspace,一般定义为对 ...
- 【Effective Java】3、避免创建不必要的对象
创建对象的时候,有些变量可以一直保持的时候,可以不必要每次实例化对象的时候都把这些变量初始化一遍,可以使用静态和静态块的方式把这些变量的数据固定下来 package cn.xf.cp.ch02.ite ...
- mybatis/callablestatement调用存储过程mysql connector产生不必要的元数据查询
INFO | jvm 1 | 2016/08/25 15:17:01 | 16-08-25 15:17:01 DEBUG pool-1-thread-371dao.ITaskDao.callProce ...