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