<!-- Swiper -->
<div class="swiper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-1.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-2.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-3.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-4.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-5.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-6.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-7.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-8.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-9.jpg)">
      </div>
      <div class="swiper-slide" style="background-image:url(https://swiperjs.com/demos/images/nature-10.jpg)">
      </div>
    </div>
  </div>

  <!-- Add Arrows -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  height: 100%;
  overflow: auto;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  position: relative;
  margin-top: 50px;
  padding: 0 75px;
  height: 200px;
  z-index: 0;
  --swiper-navigation-size: 16px;
  --swiper-theme-color: #222;
}

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

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: center / cover #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-button-prev {
  left: 30px;
  z-index: -1;
}

.swiper-button-next {
  right: 30px;
  z-index: -1;
}

.swiper-button-prev::before,
.swiper-button-next::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border: 10px solid red;
  z-index: -1;
  pointer-events: none;
}

.swiper-button-prev::before {
  transform: translateX(14px) rotate(45deg);
  left: 0;
  right: auto;
  border-top: none;
  border-right: none;
}

.swiper-button-next::before {
  transform: translateX(-14px) rotate(-45deg);
  left: auto;
  right: 0;
  border-top: none;
  border-left: none;
}

new Swiper(".swiper-container", {
  effect: "coverflow",
  grabCursor: true,
  centeredSlides: true,
  loop: true,
  slidesPerView: 1.5,
  coverflowEffect: {
    rotate: -2,
    stretch: "-80%",
    depth: 200,
    modifier: -1,
    slideShadows: false
  },

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});