在创建轮播时,swiperjs会创建重复的图像幻灯片。我想删除我写了删除功能的单击按钮上的幻灯片/图像。
然而,问题是它没有删除swiperjs创建的重复幻灯片。
这是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);
}
如何获取重复幻灯片索引和真实幻灯片索引以便我可以删除幻灯片?