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

　　

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