webページ作成でよく使用するカルーセルをコピペで作成できるようにコードをここにまとめます。

##完成イメージ
https://twitter.com/i/status/1389181756750716928

##フォルダ構成
フォルダ構成は下のようにしています。

root/
　├ index.html
　├ styles.css
　├ main.js
　└ img
　　　├ carousel1.jpg
　　　├ carousel2.jpg
　　　└ carousel3.jpg

下のHTML、CSS、JavaScriptのコードをそのままコピペし、画像のURLを変えればそのまま使えます。
#コード
###HTML

HTML

<!doctype html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--CSSの読み込み-->
    <link rel="stylesheet" href="./styles.css">
  </head>
　<body>
    <div class="carousel">
　    <!--写真表示部分-->
      <ul class="carousel-area">
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel1.jpg" alt="carousel1">
        </li>
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel2.jpg" alt="carousel2">
        </li>
        <li class="carousel-list">
          <img class="carousel-img" src="img/carousel3.jpg" alt="carousel3">
        </li>
      </ul>

　    <!--「次へ」「前へ」移動する矢印-->
      <div class="arrow-wrap">
        <div class="arrow-left">
          <button class="arrow-btn js-btn-back" type="button"></button>
        </div>
        <div class="arrow-right">
          <button class="arrow-btn js-btn-next" type="button"></button>
        </div>
      </div>

    　<!--ページネーション-->
      <div class="pagination">
        <span class="pagination-circle target"></span>
        <span class="pagination-circle"></span>
        <span class="pagination-circle"></span>
      </div>
    </div>

    <!--jQueryの読み込み-->
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" 
    type="text/javascript"></script>
    <!--javascriptファイルの読み込み-->
    <script src="./main.js" type="text/javascript"></script>
  <body>
</html>

###CSS

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}

body {
  overflow: hidden;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
.carousel {
  width: 600px;
  height: calc(600px * 0.5625);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.carousel .carousel-area {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
}

.carousel .carousel-area .carousel-list {
  width: 600px;
  height: calc(600px * 0.5625);
  margin-right: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel .carousel-area .carousel-list:nth-child(1) {
  background-image: url(./img/carousel1.jpg);
}

.carousel .carousel-area .carousel-list:nth-child(2) {
  background-image: url(./img/carousel2.jpg);
}

.carousel .carousel-area .carousel-list:nth-child(3) {
  background-image: url(./img/carousel3.jpg);
}

.carousel .carousel-area .carousel-list .carousel-img {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.carousel .arrow-wrap {
  width: 96%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.carousel .arrow-wrap .arrow-btn {
  width: 48px;
  height: 48px;
  background-color: rgba(113, 135, 245, 0.8);
  border-radius: 50%;
  -webkit-transition: .2s;
  transition: .2s;
}

.carousel .arrow-wrap .arrow-btn:focus {
  -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}

.carousel .arrow-wrap .arrow-btn:hover {
  background-color: #334fd8;
  -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}

.carousel .arrow-wrap .arrow-left {
  position: relative;
}

.carousel .arrow-wrap .arrow-left button:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-30%, -50%) rotate(-45deg);
          transform: translate(-30%, -50%) rotate(-45deg);
}

.carousel .arrow-wrap .arrow-right {
  position: relative;
}

.carousel .arrow-wrap .arrow-right button:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-70%, -50%) rotate(135deg);
          transform: translate(-70%, -50%) rotate(135deg);
}

.carousel .pagination {
  width: 16%;
  margin: 5% auto 0;
  position: absolute;
  bottom: 3%;
  left: 42%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.carousel .pagination .pagination-circle {
  width: 10px;
  height: 10px;
  border: 1px solid #333;
  border-radius: 50%;
  background-color: rgba(10, 10, 10, 0.5);
}

.carousel .pagination .pagination-circle.target {
  background-color: rgba(10, 10, 100, 0.8);
}

@media screen and (max-width: 600px) {
  .carousel {
    width: 300px;
    height: calc(300px * 0.5625);
  }
  .carousel .carousel-area .carousel-list {
    width: 300px;
    height: calc(300px * 0.5625);
    margin-right: 0;
  }
}

###JavaScript

JavaScript

$(function(){
  // スライドリストの合計幅を計算⇒ＣＳＳでエリアに代入
  let width = $('.carousel-list').outerWidth(true); //.carouse-listの１枚分の幅
  let length = $('.carousel-list').length; //.carousel-listの数
  let slideArea = width * length; //レール全体幅＝スライド１枚の幅　×　スライドの合計数
  $('.carousel-area').css('width', slideArea); //カルーセルレールに計算した合計幅を指定

  //スライド現在値と最終スライド
  let slideCurrent = 0; //スライドの現在値（１枚目のスライド番号としての意味も含む）
  let lastCurrent = $('.carousel-list').length - 1; //スライドの合計数＝最後のスライド番号

  //スライドの切り替わりを「changeslide」として定義
  function changeslide(){
    $('.carousel-area').stop().animate({ //stopメソッドを入れることでアニメーション１回毎に止める
      left: slideCurrent * -width //代入されたスライド数　×　リスト１枚分の幅を左に動かす
    });
    //ページネーションの変数を定義（＝スライド現在値が必要）
    let pagiNation = slideCurrent + 1; //nth-of-typeで指定するため0に+1をする
    $('.pagination-circle').removeClass('target'); //targetクラスを削除
    $(".pagination-circle:nth-of-type(" + pagiNation + ")").addClass('target') //現在のボタンにtargetクラスを追加
  };

  //-----一定時間毎に処理実行する関数「startTimer」を定義
  let Timer;
  function startTimer(){
    Timer = setInterval(function(){
      if (slideCurrent === lastCurrent){
        slideCurrent = 0;
        changeslide();
      }else{
        slideCurrent++;
        changeslide();
      };
    }, 3000);
  };
  function stopTimer(){
    clearInterval(Timer); //crearInterval:setIntervalで設定したタイマーを取り消す
  };
  startTimer();

  //-----------ボタンクリック時の「changeslide」関数を呼び出し----------------
  //NEXTボタン
  $('.js-btn-next').click(function(){
    stopTimer();
    startTimer();
    if (slideCurrent === lastCurrent){ //現在のスライドが最終スライドの場合
      slideCurrent = 0;
      changeslide(); //スライド初期値の値を代入して関数実行（初めのスライドに戻す）
    }else{
      slideCurrent++;
      changeslide(); //そうでなければスライド番号を増やして（次のスライドに切り替え）関数実行
    };
  });
  //BACKボタン
  $('.js-btn-back').click(function(){
    stopTimer();
    startTimer();
    if (slideCurrent === 0){ //現在のスライドが初めのスライドの場合
      slideCurrent = lastCurrent;
      changeslide(); //最後のスライド番号を代入して関数実行（最後のスライドに移動）
    }else{
      slideCurrent--;
      changeslide(); //そうでなければスライド番号を減らして（前のスライドに切り替え）関数実行
    };
  });
})

##蛇足：CSS(SCSSバージョン) ※下のコードは不要です
下のコードは不要ですが、上のCSSコードは下のSCSSコードをコンパイルしたものですので、一応このコードもこちらに記載しておきたいと思います。

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
body{
  overflow: hidden;
}
button{
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
.carousel{
      width: 600px;
      height: calc(600px * 0.5625);
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      .carousel-area{
        // width: 3150px;
        height: 100%;
        display: flex;
        position: absolute;
        .carousel-list{
          width: 600px;
          height: calc(600px * 0.5625);
          margin-right: 30px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          &:nth-child(1){background-image: url(./img/carousel1.jpg)};
          &:nth-child(2){background-image: url(./img/carousel2.jpg)};
          &:nth-child(3){background-image: url(./img/carousel3.jpg)};
          .carousel-img{
            width: 1px;
            height: 1px;
            clip: rect(1px, 1px, 1px, 1px);
            -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
            margin: -1px;
            padding: 0;
            overflow: hidden;
            position: absolute;
          }
        }
      }
      .arrow-wrap{
        width: 96%;
        height: 100%;
        margin: 0 auto;
        position: absolute;
        top: 0;
        left: 2%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .arrow-btn{
          width: 48px;
          height: 48px;
          background-color: rgba(113, 135, 245, 0.8);
          border-radius: 50%;
          transition: .2s;
          &:focus{
            box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          }
          &:hover{
            background-color: rgb(51, 79, 216);
            box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
          }
        }
        .arrow-left{
          position: relative;
          button:before{
            content: "";
            width: 10px;
            height: 10px;
            // cursor: pointer;
            border-top: 2px solid #fefefe;
            border-left: 2px solid #fefefe;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-30%, -50%)rotate(-45deg);
          }
        }
        .arrow-right{
          position: relative;
          button:before{
            content: "";
            width: 10px;
            height: 10px;
            border-top: 2px solid #fefefe;
            border-left: 2px solid #fefefe;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-70%, -50%)rotate(135deg);
          }
        }
      }
      .pagination{
        width: 16%;
        margin: 5% auto 0;
        position: absolute;
        bottom: 3%;
        left: 42%;
        display: flex;
        justify-content: space-around;
        .pagination-circle{
          width: 10px;
          height: 10px;
          border: 1px solid #333;
          border-radius: 50%;
          background-color: rgba(10, 10, 10, 0.5);
          &.target{
            // background-color: rgba(10, 10, 10, 0.8);
            background-color: rgba(10, 10, 100, 0.8);
          }
        }
      }
    }
    @media screen and (max-width: 600px){
      .carousel{
        width: 300px;
        height: calc(300px * 0.5625);
        .carousel-area{
          // width: 1500px;
          .carousel-list{
            width: 300px;
            height: calc(300px * 0.5625);
            margin-right: 0;
          }
        }
      }
    }

#参考サイト https://daib-log.com/carousel/#index_id5