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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js