Swiper JS Not responding same on two pages

  Kiến thức lập trình

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

Érick Vallart is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT