I have troubles with swiper JS. I use Webflow.
There are two instances of the Swiper, left and right.
When the slide change on the right, the text (left side) is fading incomplete over the previous one. Like they stack on top of each other, using arrow buttons. But if I grab the text party to change slides the fade works 100%
Video: https://streamable.com/d8h9di
[enter image description here](https://i.sstatic.net/TZE9ClJj.png)
Code:
<!-- SWIPER JS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<!-- Swiper initialization script -->
<script>
// Function to update button state
function updateButtonState(swiper) {
const { isBeginning, isEnd } = swiper;
const prevButton = document.querySelector(swiper.params.navigation.prevEl);
const nextButton = document.querySelector(swiper.params.navigation.nextEl);
if (isBeginning) {
prevButton.classList.add('disabled');
} else {
prevButton.classList.remove('disabled');
}
if (isEnd) {
nextButton.classList.add('disabled');
} else {
nextButton.classList.remove('disabled');
}
}
// Photo swiper initialization
let photoSwiper = new Swiper(".swiper.is-photos", {
slidesPerView: "auto",
direction: "horizontal",
loop: true,
spaceBetween: 20,
centeredSlides: false,
navigation: {
nextEl: ".arrow.is-right",
prevEl: ".arrow.is-left"
},
on: {
slideChange: function () {
updateButtonState(this);
},
init: function () {
updateButtonState(this);
},
},
});
// Content swiper initialization
let contentSwiper = new Swiper(".swiper.is-content", {
speed: 0,
loop: true,
followFinger: false,
effect: 'fade',
fadeEffect: {
crossFade: true
}
});
// Link swipers
photoSwiper.controller.control = contentSwiper;
contentSwiper.controller.control = photoSwiper;
</script>```
I would like to not have the fade being stuck. I tried background colors but it changes nothing.
New contributor