I am using Swiper js for slides on the page. each slide has another image element positioned part inside the slide image and a part outside of it. so Whenever slide changes the part outside the slide can be seen.
I tries to use overflow: hidden for different classes of swiper js but did not work.
Here is the link you can check the slider: https://project-instock.netlify.app/index1.html#0
I did it by adding fadeEffect: { crossFade: true, }.
Initially, the script was
var swiper = new Swiper('.mySwiper5', {
effect: 'fade',
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 7000,
disableOnInteraction: false,
},
});
Which has fade effect enabled but did not mention the kind of fade.