swipe js dynamic content

Posted 2020-08-06

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

　　

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