Here is the trick to access the swiper.js element which is already present in the website and then modify it instead of creating new instance of swiper.js

To get access the swiper js instance with the below line.

var abc = document.querySelector(".swiper-container").swiper; 
//access swiperjs main container

to modify new changes and then update the element, here is the code

setTimeout(function() {
         abc.addSlide(1, '<div class="swiper-slide">Slide 10"</div>')// add new slide                                   
           abc.update(); //update the swiperjs so new slide get added
         //or abc.onResize();                           
         }, 500)
        abc.on('transitionEnd', function() {  
       console.log('*** mySwiper.realIndex', abc.realIndex);// *** mySwiper.realIndex 6(slide number)
        if(abc.realIndex==6){
       //code here to do action for slide number 6 when slide number 6 appeared
             }
   });

We can remove/add the slider element with a simple trick and then update it

$('.swiper-wrapper .swiper-slide').eq(7).remove(); // remove seventh slider
var abc = document.querySelector(".swiper-container").swiper; 
setTimeout(function() {
    abc.update();
});

Here is the documentation api for swiperjs where we can contain a complete list for accessing CSS, properties, methods, and events in the swiper.js

https://swiperjs.com/swiper-api#param-a11y-lastSlideMessage

Hope this would be a helpful trick!!!