<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://zj-v6.imgix.net/zj-content/ZJTrajectory-Planning_3_4.jpg?auto=format&fit=crop&ixlib=react-8.6.4&h=447.66814814814813&w=335.75111111111113&q=75&dpr=1" alt="">
      <div class="slide-body">
        <span>Slide 1</span>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://zj-v6.imgix.net/zj-content/ZJSocial-Impact_3_4.jpg?auto=format&fit=crop&ixlib=react-8.6.4&h=447.66814814814813&w=335.75111111111113&q=75&dpr=1" alt="">
      <div class="slide-body">
        <span>Slide 2</span>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://zj-v6.imgix.net/zj-content/ZJWorkflow_Innovation_16_9.jpg?auto=format&fit=crop&ixlib=react-8.6.4&h=292.28333333333336&w=519.6148148148148&q=75&dpr=1" alt="">
      <div class="slide-body">
        <span>Slide 3</span>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="https://zj-v6.imgix.net/zj-content/ZJLoyalty_1_1.jpg?auto=format&fit=crop&ixlib=react-8.6.4&h=335.75111111111113&w=335.75111111111113&q=75&dpr=1" alt="">
      <div class="slide-body">
        <span>Slide 4</span>
      </div>
    </div>
  </div>
</div>

body {
  background: #1a1a1a;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function : linear;
}
.swiper-slide {
  width: auto !important;
}
.slide-body {
  padding: 20px 0 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

var mySwiper = new Swiper(".swiper", {
  slidesPerView: 'auto',
  spaceBetween: 50,
  centeredSlides: true,
  speed: 5000,
  loop: true,
  freeMode: true,
  autoplay: {
    delay: 0,
    pauseOnMouseEnter: true,
    disableOnInteraction: false
  },
  pagination: {
    enabled: false
  },
  navigation: {
    enabled: false          
  },
});