<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide-1">Slide 1</div>
      <div class="swiper-slide swiper-slide-2">Slide 2</div>
      <div class="swiper-slide swiper-slide-3">Slide 3</div>
      <div class="swiper-slide swiper-slide-4">Slide 4</div>
      <div class="swiper-slide swiper-slide-5">Slide 5</div>
    </div>
</div>
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.swiper-container {
  height: 100vh;
}

.swiper-slide {
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
}

.swiper-slide-1 {
  background: linear-gradient(to right, #9796f0, #fbc7d4);
}

.swiper-slide-2 {
  background: linear-gradient(to right, #ec008c, #fc6767);
}

.swiper-slide-3 {
  background: linear-gradient(to right, #2193b0, #6dd5ed);
}

.swiper-slide-4 {
  background: linear-gradient(to right, #ffe259, #ffa751);
}

.swiper-slide-5 {
  background: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc);
}
View Compiled
var swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  effect: 'coverflow',
  mousewheel: true,
  slidesPerView: 1
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.6/swiper-bundle.min.js