JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
<div class="swiper-container">
      <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
      <div class="swiper-slide" style="background-image: url('https://placehold.jp/24/99cc99/339933/350x150.png?text=img/1.jpg');"></div>
      <div class="swiper-slide" style="background-image: url('https://placehold.jp/24/99cc99/339933/350x150.png?text=img/2.jpg');"></div>
      <div class="swiper-slide" style="background-image: url('https://placehold.jp/24/99cc99/339933/350x150.png?text=img/3.jpg');"></div>
      <div class="swiper-slide" style="background-image: url('https://placehold.jp/24/99cc99/339933/350x150.png?text=img/4.jpg');"></div>
      <div class="swiper-slide" style="background-image: url('https://placehold.jp/24/99cc99/339933/350x150.png?text=img/5.jpg');"></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

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

CSS

.swiper-container {
    width: 100%;
    height: 400px;
}
.swiper-slide {
    padding-top: 180px; /* 画像位置の調整用 */
    text-align: center;
    color: #fff;
    font-size: 30px;
    background-repeat: no-repeat;
    width: 1261px;
    background-size: cover;
    background-position: center center;"
}

JavaScript

var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    autoplay: {
        delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
        stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
        disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
    },
});