Swiper resolved dynamically changing data paging confusion

After swiper dynamically change the pager number of pages of data becomes confusing, resulting in content presentation insufficiency.

Solution of this article can not be considered a real sense solved the problem. Just to show compliance with the requirements.

Renderings:

 

Solution:

Regarded the original swiper deleting every time dynamically change data, add and re-initialize a swiper, just change the swiper-wrapper in the data. Specific code to achieve the following:

html：

<!--html-->
<div id="swiperBox">
    <div class="swiper-container" id="img_detail">
        <div class="swiper-wrapper" id="swiperImgs">
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

html part on official documentation and examples are given of the same. I just swiper-container outside and set up a <div> to dynamically add swiper deleting and changing data in dynamic times.

 

js

// js

var NUM =. 7; // sliding window picture number 
var Color = "Red"; // currently selected color package 

the window.onload = function () {
     the this .init ();
}

// initialize the sliding window 
function the init () {
     for ( var I =. 1; I <= the this .num; ++ I) {
        $("#swiperImgs").append('<div class="swiper-slide"><img src="image/' + color + '/d' + i + '.JPG" style="width:100%;"></div>')
    }
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        pagination: {
            el: '.swiper-pagination',
        }
    })
}

// change color 
function changeColor (C, n-, obj) {
    color = c;
    num = n;
    var parent = obj.parentNode;
    $(parent.childNodes).removeClass("selected");
    $(obj).addClass("selected");
    $ ( "#SwiperBox" ) .empty (); // delete the original swiper 
    $ ( "#swiperBox") the append ( '<div class = "swiper-Container" the above mentioned id = "img_detail"> <div class =. "Swiper-warpper" ID = "swiperImgs"> </ div> <div class = "Swiper-the pagination"> </ div> </ div> ' ); // add a new Swiper 
    the init (); // swiper and add content to complete the initialization 
}

 

Online method is more swiper to set the properties of the observe: to true , or call the changed data mySwiper.update () function to update, I have tried, but how many will still be some problems, or else pager tags number wrong, or else pager label does not move to follow and so on. In desperation with this approach, at ease.

 

Here is what I change the color of the button html:

<!-- 颜色选择器 -->
<div class="colorBox">
    <button onclick="changeColor('red',7,this)" class="selected"><img src="image/colorBut/red.png"/></button>
    <button onclick="changeColor('green',3,this)"><img src="image/colorBut/green.jpg"/></button>
</div>