JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/287321

by Lhankor_Mhy

HTML

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper loop">
        <!-- Slides -->
        <div class="swiper-slide"><img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=img_01.jpg" alt=""></div>
        <div class="swiper-slide"><img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=img_02.jpg" alt=""></div>
        <div class="swiper-slide"><img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=img_03.jpg" alt=""></div>
    </div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

</div>
</div>

CSS

.swiper-wrapper{
    transition-timing-function: linear !important;
  }
  .swiper-slide img{
    width: 100%;
  }

JavaScript

var mySwiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  loopPreventsSlide: false,
  freeMode: true,
  speed: 5000,
  autoplay: {
    delay: 0,
  },
  loop: true,
});
mySwiper.on('slideChangeTransitionEnd', function(swiper){
  swiper.autoplay.start();
});
document.querySelector('.swiper-button-prev').addEventListener('click', function(e){
  mySwiper.slideTo(mySwiper.activeIndex -2, 1000);
});
document.querySelector('.swiper-button-next').addEventListener('click', function(e){
  mySwiper.slidePrev(1000);
  mySwiper.slideNext(1000);
});