自動的に画像がスライドしていく画像スライダーを作る

HTML、CSS、JavaScript(jQuery)で自動的に画像がスライドしていく画像スライダーを作ります。
よくWebページのトップバナーがこんな感じに変化していますね。

動作イメージ

ページを開くと１枚目の画像が表示されています。
f:id:narunaru7638:20190413230924p:plain
しばらくすると画像が左にスライドします。（１枚目の画像が少しだけ左に見えるのが分かりますか？）

またしばらくすると画像がさらに左にスライドします。

最後の画像が表示されたあとは、再び１枚目の画像に戻ります。（ここはアニメーションなしで一瞬で戻ります。）
f:id:narunaru7638:20190413231030p:plain
f:id:narunaru7638:20190413230924p:plain

論よりコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ImgSlider</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
</head>

<body>
   <div class="main">
        <!--スライドを表示させる画面-->
       <div class="slider">
            <!--  横に並べた複数のスライドを格納する用コンテナ  -->
           <ul class="slider__container">
                <!--  各スライド -->
               <img src="img/spring.jpg" alt="" class="slider__item slider__item1">
               <img src="img/summer.jpg" alt="" class="slider__item slider__item1">
               <img src="img/autumn.jpg" alt="" class="slider__item slider__item1">
               <img src="img/winter.jpg" alt="" class="slider__item slider__item1">
           </ul>
       </div>
   </div>

 <script src="app.js"></script>

</body>
</html>

CSS

body{
    background: #f6f5f4;
    color: #333;
}
.main{
    width: 1600px;
    margin: 30px auto;
}

.slider{
    /* スライドを表示させる画面の横幅(≒スライド１枚あたりの横幅) */
    width: 1600px;
    /* スライドを表示させる画面の縦幅(≒スライド１枚あたりの縦幅) */
    height: 1066px;
    /* はみ出した要素は隠れるようにする */
    overflow: hidden;
}
.slider__container{
    /* スライドを表示する画面とスライド１枚をぴったり合わせるため設定 */
    padding: 0;
    margin: 0;
    
    /* 子要素でfloatを利用しているため設定 */
    overflow: hidden;

    list-style: none;

    /* 後ほどJSでleftプロパティを設定するため必要 */
    position: relative;

}
.slider__item{
    /* スライド１枚あたりの横幅 */
    width: 1600px;
    /* スライド１枚あたりの縦幅 */
    height: 1066px;
    /* スライドを横一列に並べる */
    float: left;
}

JavaScript(jQuery)

//最初にどのスライドから表示するかを選択
var currentItemNum = 1;

var $slideContainer = $('.slider__container');

//クラスslider__itemの要素の個数を算出
var slideItemNum = $('.slider__item').length;

//スタイド１つあたりの横幅を算出
var slideItemWidth = $('.slider__item').innerWidth();

//スライド１つあたりの横幅とスライドの個数から
var slideContainerWidth = slideItemWidth * slideItemNum;

//スライドさせる速さ(animateメソッド用)
var DURATION = 1000;

//横に並べた複数のスライドを格納する用コンテナの横幅を設定
$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');

//スライドを自動的に変化させる関数
function autoSlide(){
    //現在のスライドの番号が全部のスライドの数より少ないとき
    if(currentItemNum < slideItemNum){
        //スライド用コンテナをanimateメソッドで変化させる
        $slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION);//現在のCSSのleftのプロパティの値からスライド１つあたりの横幅分変化させる
        currentItemNum++;//現在のスライド番号を１増やす
    //現在のスライドの番号が全部のスライドの数と同じとき
    }else if(currentItemNum = slideItemNum){
        //現在のCSSのleftのプロパティの値を変更(徐々に変化させないのでanimateメソッドは使わない)
        $slideContainer.css('left', '+='+slideItemWidth*(slideItemNum-1)+'px');
        currentItemNum = 1;//現在のスライド番号を１に戻す
    }
}

//setInterval関数で適当な秒数ごとに実施
setInterval(autoSlide, 5000);

ポイントまとめ

・スライドを表示させる画面、複数のスライドを横に並べる用のコンテナ、各スライドの要素を用意
・スライドを表示させる画面に、スライド１枚分が表示されるように、大きさや「overflow:hidden;」を設定
・JSでスライドの横幅や数を取得し、それに合わせてコンテナの大きさや一回のスライドする幅を設定する
・animeteメソッドでコンテナのpositionを変化させる
・setIntervalで定期的に画像をスライド