OV Fashion Slider - OV DIVI

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
// Envuelve la sección 'ov-fashion-slider' dentro de 'fashion-slider'
const ovFashionSlider = document.querySelector(".ov-fashion-slider");
const wrapper = document.createElement("div");
wrapper.className = "fashion-slider";
ovFashionSlider.parentNode.insertBefore(wrapper, ovFashionSlider);
wrapper.appendChild(ovFashionSlider);

// Definir los colores de las columnas 'swiper-slide'
const colores = ['#9FA051', '#9B89C5', '#D7A594',];

const swiperSlides = document.querySelectorAll('.swiper-slide');
swiperSlides.forEach((slide, index) => {
  const color = colores[index % colores.length];
  slide.setAttribute('data-slide-bg-color', color);
});

// Añade a los titulos el atributo 'data-swiper-parallax' con el valor '-130%'
var elementos = document.querySelectorAll('.fashion-slider-title');
elementos.forEach(function(elemento) {
    elemento.setAttribute('data-swiper-parallax', '-130%');
});

// Insertar las flechas de navegación dentro de 'swiper'
var swiper = document.querySelector('.swiper');

var prevButton = document.createElement('div');
prevButton.className = 'fashion-slider-button-prev fashion-slider-button';

prevButton.innerHTML = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
    <g class="fashion-slider-svg-wrap">
      <g class="fashion-slider-svg-circle-wrap">
        <circle cx="42" cy="42" r="40"></circle>
      </g>
      <path class="fashion-slider-svg-arrow" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
      <path class="fashion-slider-svg-line" d="M80,0H0"></path>
    </g>
  </svg>
`;

var nextButton = document.createElement('div');
nextButton.className = 'fashion-slider-button-next fashion-slider-button';

nextButton.innerHTML = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
    <g class="fashion-slider-svg-wrap">
      <g class="fashion-slider-svg-circle-wrap">
        <circle cx="42" cy="42" r="40"></circle>
      </g>
      <path class="fashion-slider-svg-arrow" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
      <path class="fashion-slider-svg-line" d="M80,0H0"></path>
    </g>
  </svg>
`;

swiper.insertAdjacentElement('beforeend', prevButton);
swiper.insertAdjacentElement('beforeend', nextButton);
</script>

<script>
// Crear la función 'Fashion Slider'
function createFashionSlider(el) {
  const swiperEl = el.querySelector('.swiper');
  let navigationLocked = false;
  let transitionDisabled = false;
  let frameId;

  const disableTransitions = (el) => {
    el.classList.add('fashion-slider-no-transition');
    transitionDisabled = true;
    cancelAnimationFrame(frameId);
    frameId = requestAnimationFrame(() => {
      el.classList.remove('fashion-slider-no-transition');
      transitionDisabled = false;
      navigationLocked = false;
    });
  };

  let fashionSlider;

  const onNextClick = () => {
    if (!navigationLocked) {
      fashionSlider.slideNext();
    }
  };
  const onPrevClick = () => {
    if (!navigationLocked) {
      fashionSlider.slidePrev();
    }
  };

  const initNavigation = (swiper) => {
    swiper.el
      .querySelector('.fashion-slider-button-next')
      .addEventListener('click', onNextClick);
    swiper.el
      .querySelector('.fashion-slider-button-prev')
      .addEventListener('click', onPrevClick);
  };

  const destroyNavigation = (swiper) => {
    swiper.el
      .querySelector('.fashion-slider-button-next')
      .removeEventListener('click', onNextClick);
    swiper.el
      .querySelector('.fashion-slider-button-prev')
      .removeEventListener('click', onPrevClick);
  };

  let loopFixed;

  fashionSlider = new Swiper(swiperEl, {

    speed: 1300,
    allowTouchMove: false,
    parallax: true,
    on: {
      loopFix() {
        loopFixed = false;
      },
      transitionStart(swiper) {
        const isLoop = swiper.params.loop;
        if (isLoop) {
          if (loopFixed) {
            return;
          }
          if (!loopFixed) {
            loopFixed = true;
          }
        }

        const { slides, previousIndex, activeIndex, el } = swiper;
        if (!transitionDisabled) navigationLocked = true;

        const activeSlide = slides[activeIndex];
        const previousSlide = slides[previousIndex];
        const previousImageScale = previousSlide.querySelector(
          '.fashion-slider-scale',
        );
        const previousImage = previousSlide.querySelector('img');
        const activeImage = activeSlide.querySelector('img');
        const direction = activeIndex - previousIndex;
        const bgColor = activeSlide.getAttribute('data-slide-bg-color');
        el.style['background-color'] = bgColor;

        previousImageScale.style.transform = 'scale(0.6)';
        previousImage.style.transitionDuration = '1000ms';
        previousImage.style.transform = 'scale(1.2)';
        const previousSlideTitle = previousSlide.querySelector(
          '.fashion-slider-title-text',
        );
        previousSlideTitle.style.transition = '1000ms';
        previousSlideTitle.style.color = 'rgba(255,255,255,0)';

        const onTransitionEnd = (e) => {
          if (e.target !== previousImage) return;
          previousImage.removeEventListener('transitionend', onTransitionEnd);
          activeImage.style.transitionDuration = '1300ms';
          activeImage.style.transform = 'translate3d(0, 0, 0) scale(1.2)';
          previousImage.style.transitionDuration = '1300ms';
          previousImage.style.transform = `translate3d(${
            60 * direction
          }%, 0, 0)  scale(1.2)`;
        };
        previousImage.addEventListener('transitionend', onTransitionEnd);
      },
      transitionEnd(swiper) {
        const { slides, activeIndex, el } = swiper;
        const activeSlide = slides[activeIndex];
        const activeImage = activeSlide.querySelector('img');
        const isLoop = swiper.params.loop;

        activeSlide.querySelector('.fashion-slider-scale').style.transform =
          'scale(1)';
        activeImage.style.transitionDuration = '1000ms';
        activeImage.style.transform = 'scale(1)';

        const activeSlideTitle = activeSlide.querySelector(
          '.fashion-slider-title-text',
        );
        activeSlideTitle.style.transition = '1000ms';
        activeSlideTitle.style.color = 'rgba(255,255,255,1)';

        const onTransitionEnd = (e) => {
          if (e.target !== activeImage) return;
          activeImage.removeEventListener('transitionend', onTransitionEnd);
          navigationLocked = false;
        };
        activeImage.addEventListener('transitionend', onTransitionEnd);
        if (!isLoop) {
          if (activeIndex === 0) {
            el.querySelector('.fashion-slider-button-prev').classList.add(
              'fashion-slider-button-disabled',
            );
          } else {
            el.querySelector('.fashion-slider-button-prev').classList.remove(
              'fashion-slider-button-disabled',
            );
          }

          if (activeIndex === slides.length - 1) {
            el.querySelector('.fashion-slider-button-next').classList.add(
              'fashion-slider-button-disabled',
            );
          } else {
            el.querySelector('.fashion-slider-button-next').classList.remove(
              'fashion-slider-button-disabled',
            );
          }
        }
      },
      beforeInit(swiper) {
        const { el } = swiper;
        disableTransitions(el);
      },
      init(swiper) {
        const { slides, activeIndex, el } = swiper;
        const bgColor = slides[activeIndex].getAttribute('data-slide-bg-color');
        el.style['background-color'] = bgColor;

        swiper.emit('transitionEnd');
        initNavigation(swiper);
      },
      resize(swiper) {
        disableTransitions(swiper.el);
      },
      destroy(swiper) {
        destroyNavigation(swiper);
      },
    },
  });

  return fashionSlider;
}
</script>

<script>
// Inicializar 'fashion-slider'
const sliderEl = document.querySelector('.fashion-slider');
createFashionSlider(sliderEl);
</script>