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}" >            </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);
    };

  

注:主要用于商品图片展示,当选择不同颜色的商品,商品图片要替换。

时间: 2024-10-13 07:35:41

swipe js dynamic content的相关文章

移动web最简洁的滑动效果Swipe JS(适合初学者)

最近要做一个移动web的项目,前端后端都自己一人来搞.由于之前一直是做后端的开发,没涉及过前端的开发,甚是无从下手,但又不得不去弄,于是乎,先把w3school上前端相关的html.js.css都预览了一遍,然后在仿照别人的站点自己尝试着去实现. 虽然很多人都是前台很简单,没啥搞的(至少像我做后台的那些同事这么认为),但是真正开始弄起来,还是有些困难的,要做到美观易用,更得下工夫研究里面的所以然. 以下是我要实现一个在手机上滑动(图片,文字等)的效果.我先是把别人的页面下载下来,然后根据它的在页

swipe.js 轻松实现手机端滑动效果

插件下载地址 官网:http://www.swipejs.comgithub:https://github.com/bradbirdsall/Swipe 插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动开发中 使用方法 HTML代码如下: <div id='slider' class='swipe'> <div class='swipe-wrap'> <div>

移动端的内容滑块js库 swipe.js

swipe.js 是一个轻量级的移动端内容滑块,类似于pc端的slide.js,用于实现轮播广告或其他内容滑动模块 ,支持移动端屏幕滑动手势操作.此库不依赖于任何其他的js库,可独立使用 使用swipe.js时只需将下载好的文件引用到页面,然后在页面中写好对应的结构 <div id="slider" class="swipe"> <div class="swipe-wrap"> <div></div>

swipe JS – 移动WEB页面内容触摸滑动类库

swipe.js文档及用法 今天带来一个轻量级js触摸滑动类库-swipe JS,这是一个非常小的一个javascript类库,但他的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放.等比例缩放等等实用性的功能: 一.用法 Swipe只需添加很简单的一段代码即可,如下 <div id='slider' class='swipe'> <div class='swipe-wrap'> <div class='wrap'>&l

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,这里是使用如下的代码:

移动端触摸滑动插件swipe.js

插件特色 swipe.js是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚动间隔,返回回调函数等.经常可见使用在移动前端开发中. 使用方法 下面是一个比较简单的使用例子,添加适当的HTML代码和js代码即可. <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div>

Swipe.js支持网页点击和数字导航

Swipe.js是一个移动端的滑动插件,使用手指触摸滑动,并且支持左右导航,详情请访问之前的一篇文章介绍:Swipe.js. 但却不支持网页版的点击跳转和数字导航,这些需要你自己添加的,之前本来是想使用这个在前端开发中的,最后发现没有这个功能,最近我又开始折腾了一下,发现原来也可以用在桌面版中,只不过需要自己额外添加一些代码.并且支持IE6.支持自适应设计,不需要jquery,一下子感觉好赞. 首先添加插件的路径,然后添加以下js代码: var mySwipe = Swipe(document.

前端插件--swipe.js

swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 }

swipe.js实现支持手拔与自动切换的图片轮播

一.Html代码如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div class='swipe-wrap'> <li style="no-repeat center center; list-style-type: none;"><img src="/1.jpg" /></li> <li styl