Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

 <!-- リンクスワイパー-->
  <link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="外部 nofollow" >
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

<script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

<link href="http://www.swiper.com.cn/dist/css/swiper.min.css" rel="外部nofollow" />

 <スタイル>
    .スワイパーコンテナ{
    //ここで幅と高さを設定できます width: 50%;
      高さ: 50%;
    }
    .スワイパースライド{
      テキスト配置: 中央;
      フォントサイズ: 18px;
      背景: #fff;
      /* スライドのテキストを垂直に中央揃えにする */
      ディスプレイ: フレックス;
      -webkit-box-pack: 中央;
      -ms-flex-pack: 中央;
      中央揃え
      コンテンツの中央揃え: 中央;
      -webkit-box-align: 中央;
      -ms-flex-align: 中央;
      -webkit-align-items: 中央;
      アイテムの位置を中央揃えにします。
    }
    画像{
      幅:250px;
    }
  </スタイル>

<div class="スワイパーコンテナ">
  <div class="スワイパーラッパー">
    <div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
    <div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
    //画像を追加</div>
  <!-- ページ区切りを追加 -->
  <div class="swiper-pagination"></div>
  <!-- 矢印を追加 -->
  <div class="スワイパーボタン-次へ"></div>
  <div class="スワイパーボタン前"></div>
</div>

<スクリプト>
  var swiper = new Swiper('.swiper-container', {
    スペース: 30,
    centeredSlides: true、
    自動再生:
      遅延: 2500、
      対話時に無効にする: false、
    },
    ページネーション:
      el: '.swiper-pagination',
      クリック可能: true、
    },
    ナビゲーション:
      nextEl: '.swiper-button-next',
      前へ: '.swiper-button-prev',
    },
  });
</スクリプト>

フリーモード:true、

自動再生:

遅延:0

}

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear; /*以前はease-outでした*/
  -moz-transition-timing-function: 線形;
  -ms-遷移タイミング関数: 線形;
  -o-遷移タイミング関数: 線形;
  遷移タイミング関数: 線形;
  マージン: 0 自動;
}

<link rel="スタイルシート" href="../../styles/library/swiper.min.css" rel="外部nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script> 

 // スライドショー - 左右にスライドして切り替えます var mySwiper = new Swiper('.swiper-container',{
    ページネーション: '.pagination',
    ループ:false、
    モード: '水平'、
    フリーモード:false、
    タッチ比率:0.5,
    ロングスワイプ比率:0.1、
    閾値:50、
    followFinger:false、
    observer: true, // スワイパー自体またはその子要素を変更すると、スワイパーが自動的に初期化されます
    observeParents: true, //スワイパーの親要素を変更すると、スワイパーを自動的に初期化します
    onSlideChangeEnd:function(swiper){ // スライドが終了すると、月と日が同期して左右に切り替わります。changeMonth();
    }
  });