码迷,mamicode.com
首页 > Web开发 > 详细

swipe js dynamic content

时间:2016-09-05 13:41:35      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:

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

  

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

swipe js dynamic content

标签:

原文地址:http://www.cnblogs.com/jetlian/p/swipe-js-dynamic-content.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!