无法删除swiper carousel中的幻灯片

时间:2016-11-25 13:41:54

标签: javascript jquery carousel swiper

在创建轮播时,swiperjs会创建重复的图像幻灯片。我想删除我写了删除功能的单击按钮上的幻灯片/图像。

然而,问题是它没有删除swiperjs创建的重复幻灯片。

Here is the plunkr

这是html:

<div class="container">
    <section id="dropBox" class="mybox col-lg-12" ondragover="{ondragOver}" ondrop="{showImages}">
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <span class="swiper-slide" each="{option, choice in data.images}">
                    <img class='thumbnail' src="{option.imageUrl}" title='preview image'/>
                </span>
            </div>
        </div>
    </section>
</div>

Javascript代码:

var activeIndex = '';
//initializer function in riotjs
self.on('updated', function(){
    var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
//    slidesPerView: 3,
    slidesPerGroup: 3,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
//    initialSlide: 1,
    centeredSlides: true,
    paginationClickable: true,
    spaceBetween: 30,
})

function deleteImage(e){
    self.data.images.splice(0, 1);
    mySwiper.removeSlide(0);

    // NONE OF THE BELOW DELETES A SLIDE PROPERLY
    //   mySwiper.removeSlide(mySwiper.snapIndex);
    //   mySwiper.removeSlide(0);
    //   mySwiper.removeSlide(mySwiper.clickedIndex);
    //   mySwiper.removeSlide(mySwiper.clickedSlide);
    //   mySwiper.removeSlide(mySwiper.activeIndex);
    //   mySwiper.removeSlide(mySwiper.realIndex);
    //   self.update();
    console.log("self.data.images after delete==", self.data.images);
}

如何获取重复幻灯片索引和真实幻灯片索引以便我可以删除幻灯片?

0 个答案:

没有答案