<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
       <!-- Slides -->
       <div class="swiper-slide c1">Slide 1</div>
       <div class="swiper-slide c2">Slide 2</div>
       <div class="swiper-slide c3">Slide 3</div>
       <div class="swiper-slide c4">Slide 4</div>
       <div class="swiper-slide c5">Slide 5</div>
    </div>
    <!-- If we need pagination -->
<!--     <div class="swiper-pagination"></div> -->
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
.swiper-container {
    width: 800px;
    height: 400px;
}
.swiper-slide{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size:2rem;
  font-family: monospace;
  letter-spacing: 0.08rem 
}

.c1 {
  background-color: indianred;
}
.c2 {
  background-color: teal;
}
.c3 {
  background-color: lightskyblue;
}
.c4 {
  background-color: lightcoral;
}
.c5 {
  background-color: lightgoldenrodyellow;
}
var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  loop: true,
  slidesPerView : 2,
  centeredSlides : true,
  effect : 'coverflow',
  coverflow: {
            rotate: 0,
            stretch: 0,
            depth: 300,
            modifier: 1,
            // slideShadows : true
        },
   
  // If we need pagination
  // pagination: '.swiper-pagination',
   
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
    
  }) 
Run Pen

External CSS

  1. https://cdn.bootcss.com/Swiper/4.0.7/css/swiper.min.css

External JavaScript

  1. https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js