https://www.idealmarketing.com.br/wp-content/themes/ideal-marketing/assets/js/banner-cases-observer.js

1export default () => {
2  const slides = document.querySelectorAll(
3    "#banner_cases .banner-cases-swiper .swiper-slide",
4  );
5  const backgrounds = document.querySelectorAll("#banner_cases .banner-case");
6
7  if (slides.length < 1 || backgrounds.length < 1) return;
8
9  const observer = new MutationObserver(() => {
10    slides.forEach((slide, index) => {
11      if (slide.classList.contains("swiper-slide-active")) {
12        backgrounds.forEach((bg, i) => {
13          bg.classList.toggle("!opacity-100", i === index);
14          bg.classList.toggle("!z-[1]", i === index);
15        });
16      }
17    });
18  });
19
20  slides.forEach((slide) => {
21    observer.observe(slide, { attributes: true, attributeFilter: ["class"] });
22  });
23};