How to make an analogue of the "running line" using swiper.js?

 var swiper = new Swiper('#js-carousel', { slidesPerView: 3, spaceBetween: 30, speed: 2000, loop: true, autoplay: { delay: 0, }, }); 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> <div class="container"> <div class="row"> <div class="swiper-container" id="js-carousel"> <div class="swiper-wrapper"> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 1" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 2" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 3" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 4" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 5" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 6" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 7" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 8" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 9" alt=""> </div> <div class="swiper-slide" style="text-align: center"> <img src="https://via.placeholder.com/200x100?text=Img 10" alt=""> </div> </div> </div> </div> </div>