<div class="slider">
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(https://images.unsplash.com/photo-1574388043891-87082df8d6e5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=375&q=80)"></div>
      <div class="swiper-slide" style="background-image:url(https://images.unsplash.com/photo-1455970022149-a8f26b6902dd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=348&q=80)"></div>
      <div class="swiper-slide" style="background-image:url(https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=358&q=80)"></div>
      <div class="swiper-slide" style="background-image:url(https://images.unsplash.com/photo-1495360010541-f48722b34f7d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=376&q=80)"></div>
    </div>
  </div>

  <div class="slider__curtain curtain">
    <div class="curtain__section curtain__section_left">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section">
      <div class="curtain__tile"></div>
    </div>
    <div class="curtain__section curtain__section_right">
      <div class="curtain__tile"></div>
    </div>
  </div>
  
    <!-- Add Arrows -->
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>

body {
  margin: 0;
  min-height: 100vh;
  height: 1px;
}

.slider {
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-container-fade .swiper-slide {
  transition-timing-function: step-end;
}

.swiper-button-next, .swiper-button-prev {
  z-index: 20;
}

.curtain {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  display: flex;
  pointer-events: none;
}

.curtain__section {
  width: calc(1200px / 6);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.curtain__section_left {
  width: calc((100% - 1200px) / 2);
}

.curtain__section_right {
  width: calc((100% - 1200px) / 2);
}

.curtain__tile {
  width: 100%;
  height: 100%;
  background: #141414;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-101%);
}

const curtainTween = anime({
  targets: '.curtain__tile',
  translateX: [
    { value: '-101%', duration: 0 },
    { value: '0%', duration: 1000 },
    { value: '101%', duration: 1000 },
  ],
  easing: 'easeInOutCubic',
  autoplay: false,
});


const swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  effect: 'fade',
  speed: 1000,
  loop: true,
  autoplay: {
    delay: 3000,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  on: {
    setTransition: (swiper, transition) => transition && curtainTween.play(),
  }
});