Невозможно удалить слайд в карусели

Question

При создании карусели 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);
}

Как мне получить дубликат индекса слайдов и индекс реального слайда, чтобы я мог удалить слайд?