html

<div class="slide-wrap">
  <div class="slideshow">
    <div class="slideshow-slides">

      <!-- スライド1枚目 開始 -->
      <div class="slide">
        <!-- スライドの内容を記述 -->
        <a href="">
          <img src="" alt="image1">
        </a>
      </div>
      <!-- スライド1枚目 終了 -->

      <!-- スライド2枚目 開始 -->
      <div class="slide">
        <!-- スライドの内容を記述 -->
        <a href="">
          <img src="" alt="image2">
        </a>
      </div>
      <!-- スライド2枚目 終了 -->

      <!-- スライド3枚目 開始 -->
      <div class="slide">
        <!-- スライドの内容を記述 -->
        <a href="">
          <img src="" alt="image3">
        </a>
      </div>
      <!-- スライド3枚目 終了 -->

      <!-- スライド4枚目 開始 -->
      <div class="slide">
        <!-- スライドの内容を記述 -->
        <a href="">
          <img src="" alt="image4">
        </a>
      </div>
      <!-- スライド4枚目 終了 -->

    </div>
  </div>

  <div class="slideshow-indicator"></div>
  <div class="prev slideshow-nav"></div>
  <div class="next slideshow-nav"></div>
</div>

JavaScript

function startCenterSlide(target) {
  const targetSlider = document.querySelector(target);
  //スライダーの初期配置を設定
  window.addEventListener("load", function () {
    const slideIndicator = targetSlider.querySelector(".slideshow-indicator");
    let indicatorHtml = "";
    let slideEach = targetSlider.querySelectorAll(".slide");
    slideEach.forEach(function (elem, index) {
      elem.style.left = 100 * index + "%";
      indicatorHtml += "<a href='#'>" + (index + 1) + "</a>";
    });
    slideIndicator.innerHTML = indicatorHtml;

    //スライド関数を設定
    let currentIndex = 0;
    const slideLength = targetSlider.querySelectorAll(".slide").length;
    const goToSlide = function (index) {
      const slideShow = targetSlider.querySelector(".slideshow-slides");
      slideShow.style.left = -100 * index + "%";
      currentIndex = index;

      const prevButton = targetSlider.querySelector(".prev");
      const nextButton = targetSlider.querySelector(".next");

      if (currentIndex == 0) {
        prevButton.classList.add("disabled-slide");
      } else {
        prevButton.classList.remove("disabled-slide");
      }
      if (currentIndex == slideLength - 1) {
        nextButton.classList.add("disabled-slide");
      } else {
        nextButton.classList.remove("disabled-slide");
      }
      const slideIndicatorEach = slideIndicator.querySelectorAll("a");
      const slideIndicatorLength = slideIndicatorEach.length;
      for (let i = 0; i < slideIndicatorLength; i++) {
        slideIndicatorEach[i].classList.remove("active-slide");
        if (i == currentIndex) {
          slideIndicatorEach[currentIndex].classList.add("active-slide");
        }
      }
    };

    //スライドのループ処理を設定
    let timer;
    let nextIndex;

    function startTimer() {
      timer = setInterval(function () {
        nextIndex = (currentIndex + 1) % slideLength;
        goToSlide(nextIndex);
      }, 4000);
    }
    function stopTimer() {
      clearInterval(timer);
    }

    //進む・戻るボタンの挙動を設定
    const prev = targetSlider.querySelector(".prev");
    prev.addEventListener("click", function () {
      goToSlide(currentIndex - 1);
    });

    const next = targetSlider.querySelector(".next");
    next.addEventListener("click", function () {
      goToSlide(currentIndex + 1);
    });

    //進む・戻るボタンの挙動を設定
    const slideIndicatorEach = slideIndicator.querySelectorAll("a");
    slideIndicatorEach.forEach(function (elem, index) {
      elem.addEventListener("click", function (event) {
        event.preventDefault();
        if (!elem.classList.contains("active-slide")) {
          goToSlide(index);
        }
      });
    });

    //スライドにマウスオーバー時はスライド関数を停止
    const slideItem = targetSlider.querySelectorAll(".slideshow");
    slideItem.forEach(function (elem, index) {
      elem.addEventListener("mouseover", function () {
        stopTimer();
      });
      elem.addEventListener("mouseleave", function () {
        startTimer();
      });
    });

    //左右のスワイプに対応
    let direction, position;

    //横方向の座標を取得
    function getPosition(event) {
      return event.changedTouches[0].pageX;
    }

    //スワイプ開始時の横方向の座標を格納
    function onTouchStart(event) {
      position = getPosition(event);
      direction = ""; //一度リセットする
    }

    //スワイプの方向（left／right）を取得
    function onTouchMove(event) {
      if (position - getPosition(event) > 70) {
        // 70px以上移動しなければスワイプと判断しない
        direction = "left"; //左と検知
      } else if (position - getPosition(event) < -70) {
        // 70px以上移動しなければスワイプと判断しない
        direction = "right"; //右と検知
      }
    }

    function onTouchEnd(event) {
      if (direction == "right" && currentIndex > 0) {
        goToSlide(currentIndex - 1);
      } else if (direction == "left" && currentIndex < 3) {
        goToSlide(currentIndex + 1);
      }
    }

    slideItem.forEach(function (elem, index) {
      elem.addEventListener("touchstart", function (event) {
        onTouchStart(event);
      });
      elem.addEventListener("touchmove", function (event) {
        onTouchMove(event);
      });
      elem.addEventListener("touchend", function (event) {
        onTouchEnd(event);
      });
    });

    //スライド関数を実行
    goToSlide(currentIndex);
    //スライドのループを実行
    startTimer();
  });
}

// スライド対象の要素を指定してスライダー発火
startCenterSlide(".slide-wrap");

scss

.slide-wrap {
  width: 70%; //希望のスライダー横幅
  height: 30vw; //希望のスライダー縦幅
  margin: 100px auto 3%;
  position: relative;

  .slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    // overflow: hidden; //左右のスライドを非表示に

    .slideshow-slides {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: 0.5s;

      .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 2% 4%;
        a {
          display: block;
          width: 100%;
          height: 100%;
          border: 1px solid #cccccc;
          box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
          background-color: rgba(255, 255, 255, 0.4);
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
          }
        }
      }
    }
  }

  .prev {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 20px;
    height: 20px;
    border-left: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    transform: rotate(45deg);
    cursor: pointer;

    &.disabled-slide {
      display: none;
    }
  }

  .next {
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 20px;
    height: 20px;
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    transform: rotate(-45deg);
    cursor: pointer;

    &.disabled-slide {
      display: none;
    }
  }

  .slideshow-indicator {
    width: 50%;
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    gap: 4%;

    a {
      font-size: 0;
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 7px;
      background: #2b2b2b;

      &.active-slide {
        background: #808080;
        cursor: auto;
      }
    }
  }
}