<!-- Slider container -->
<div class="swiper-container">
    <!-- Slider wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
    </div>
</div>
.swiper-container {
    //左右の余白はcontainerに指定する
    padding: 0 20px;
  .swiper-wrapper {
    padding: 30px 0;
  
    .swiper-slide {
      // slideに任意の幅と高さ指定      
      width: 150px;
      height: 100px;
      // 以下見た目調節      
      border-radius: 10px;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;

      &:nth-child(1) {
        background-color: #C5D7D9;
      }
      &:nth-child(2) {
        background-color: #D9BFA9;
      }
      &:nth-child(3) {
        background-color: #F2DFCE;
      }
      &:nth-child(4) {
        background-color: #594F4F;
      }
      &:nth-child(5) {
        background-color: #95D9D9;
      }
    }
  }
}


View Compiled
 var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      spaceBetween: 20,
      freeMode: true,
      freeModeSticky: true,
      touchRatio: .03,
      grabCursor: true
    });

External CSS

  1. https://unpkg.com/swiper/swiper-bundle.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.min.js