<div class="swiper-container">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/800/0*oGBtjYlPplnySOLb.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/800/0*5waL92vewy2vZ2Fl.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/800/0*nfvw6jZFiAHArVnK.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/1200/0*HN__HbbhFV9h_-w8.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/800/0*MhnAbwreIz-aMs8Q.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/400/0*dcr0FFlK8BopY4ap.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/800/0*X2LL7tyK_UjnOdTz.jpg" alt="">
</div>
</div>
<div class="swiper-slide">
<div class="item">
<img src="https://cdn-images-1.medium.com/max/600/0*uq-nAtibEoAQt8W9.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
/* Image from https://www.behance.net/gallery/76726697/ColorLimitedISO */
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
margin-top: 50px !important;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
width: 800px;
height: 450px;
border-radius: 20px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 80%;
height: 50%;
background: white;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
border-radius: 8px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
border-radius: 5px !important;
background: #fd3838 !important;
transition: all 0.3s !important;
}
.bg {
animation:slide 3s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, #FFEFBA 50%, #FFFFFF 50%);
bottom:0;
left:-50%;
opacity:.5;
position:fixed;
right:-50%;
top:0;
z-index:-1;
}
.bg2 {
animation-direction:alternate-reverse;
animation-duration:4s;
}
.bg3 {
animation-duration:5s;
}
@keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
View Compiled
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
});