标签:
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); };
注:主要用于商品图片展示,当选择不同颜色的商品,商品图片要替换。
标签:
原文地址:http://www.cnblogs.com/jetlian/p/swipe-js-dynamic-content.html