idangero.us使用带双向控制的Thumbs Gallery动态创建和删除幻灯片

Question

我使用Swiper在SlideEndChange上动态追加并预装幻灯片，但在添加新幻灯片后，activeSlide会跳回到开头。

这是我到目前为止所尝试的内容：

var noOfPages = 7;
var galleryTop = new Swiper('.gallery-top', {
    spaceBetween: 10,
    effect: 'slide',
    onSlideChangeEnd: function(swiper){updateReadingPages(swiper);}
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
    spaceBetween: 10,
    centeredSlides: true,
    slidesPerView: 3,
    touchRatio: 0.2,
    slideToClickedSlide: true

});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;


    var startPage = 1;
    var endPage = 5;

   if(noOfPages > 5){
       endPage = 5;
   }else{
      endPage = noOfPages;
   }

    var i = 1;
    for(i;i<=5;i++){
        initLoaded(i,"append");
    }
    var swipeLeftForFirstTime = false;//To prevent slideTo(activeIndexTwo) form setting previousIndex at the first time after reaching End of Pages....
function updateReadingPages() {
    if (galleryTop.activeIndex > galleryTop.previousIndex) { //Swipe Right
        if (galleryTop.activeIndex >= 3) {
            //If activeSlide is fourth slide, append a new slide and remove slide at index [0].
            if (endPage <noOfPages) {
                endPage++;
                startPage++;
                //alert("swipeRight And endPage = " + startPage + "and" +endPage);
                initLoaded(endPage,"append");
                var activeIndexOne = galleryTop.activeIndex;
                galleryTop.removeSlide(0);
                galleryThumbs.removeSlide(0);
                galleryTop.slideTo(activeIndexOne, 0, false);
            }else{
                swipeLeftForFirstTime = true;
            }
        }
    } else {
        //Swipe Left
        if (galleryTop.activeIndex <= 2) {
            //alert("swipeLeft And startPage = " + startPage);
            if (startPage > 1) {
                endPage--;
                startPage--;
                initLoaded(startPage,"prepend");
                var activeIndexTwo = galleryTop.activeIndex;
                galleryTop.removeSlide(5);
                galleryThumbs.removeSlide(5);

                if(swipeLeftForFirstTime){
                    galleryTop.slideTo(activeIndexTwo, 0, false);
                }else{
                    galleryTop.slideTo(activeIndexTwo-1, 0, false);
                }
            }
        }
    }
}
function initLoaded(number,option){

    if(option === "append"){
        galleryTop.appendSlide('<div class="swiper-slide" width="100%"; height="300px">'+number+'</div>');
    }else{
       galleryTop.prependSlide('<div class="swiper-slide" width="100%"; height="100px">'+number+'</div>');
    }

   if(option === "append"){
      galleryThumbs.appendSlide('<div class="swiper-slide">Thumb '+number+'</div>');
   }else{

     galleryThumbs.prependSlide('<div class="swiper-slide">Thumb '+number+'</div>');
}
}

JSFiddle

编辑：在JSFiddle上添加工作函数和示例...感谢Rafael Lepkoski

Answer 1

尝试在function initLoaded

中添加以下代码段

 if (option === "append") {
    galleryTop.slideTo(number)
 }

像这样：

function initLoaded(number,option) {
    if (option === "append") {
        galleryTop.appendSlide('<div class="swiper-slide" width="100%"; height="300px">'+number+'</div>');
        galleryThumbs.appendSlide('<div class="swiper-slide">Thumb '+number+'</div>');
        galleryTop.slideTo(number - 1);
    } else {
        galleryTop.prependSlide('<div class="swiper-slide" width="100%"; height="100px">'+number+'</div>');
        galleryThumbs.prependSlide('<div class="swiper-slide">Thumb '+number+'</div>');
    }
}

您还可以在追加之前获取活动索引，然后使用它来滑回该索引：

var activeIndex = galleryTop.activeIndex;
galleryTop.appendSlide('<div class="swiper-slide" width="100%"; height="300px">'+number+'</div>');
galleryTop.slideTo(activeIndex);

修改

在添加和删除幻灯片之前，您应该使用var activeIndex = galleryTop.activeIndex;，然后拨打mySwiper.slideTo(index, speed, runCallbacks);。

var activeIndex = galleryTop.activeIndex;
galleryTop.removeSlide(0);
galleryThumbs.removeSlide(0);
galleryTop.slideTo(activeIndex, 0, false);


var activeIndex = galleryTop.activeIndex;
galleryTop.removeLastSlide();
galleryThumbs.removeLastSlide();
galleryTop.slideTo(activeIndex, 0, false);

所以你的function updateReadingPages应该是这样的：

function updateReadingPages(swiper) {
   if (swiper.activeIndex > swiper.previousIndex) { //Swipe Right
       if (swiper.activeIndex == 3) {
           //If activeSlide is fourth slide, append a new slide and remove slide at index [0].    
           if (endPage < noOfPages) {
               endPage++;
               startPage++;
               //alert("swipeRight And endPage = " + startPage + "and" +endPage);
               initLoaded(endPage,"append");
               var activeIndex = galleryTop.activeIndex;
               galleryTop.removeSlide(0);
               galleryThumbs.removeSlide(0);
               galleryTop.slideTo(activeIndex, 0, false);
           }
       }
   } else {
       //Swipe Left
       if (swiper.activeIndex == 2) {
           //alert("swipeLeft And startPage = " + startPage);
           if (startPage > 1) {
               endPage--;
               startPage--;
               initLoaded(startPage-1,"prepend");
               var activeIndex = galleryTop.activeIndex;
               galleryTop.removeLastSlide();
               galleryThumbs.removeLastSlide();
               galleryTop.slideTo(activeIndex, 0, false);
           }
       }
   }
}