<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
});