[TIL] VaniliaJS slide

たくさんの方のブログを参考にさせていただきました
https://im-developer.tistory.com/97
私は自分の言語で学んだ内容を整理したいです.
まず、バニラスクリプトを使用して実装されたスライドコンポーネントは詐欺だと考えることができます.下図に示すように、コードの構成は以下の通りです.

リストがあり、リストを囲むwrap要素もあります.リストはすべてのコンテンツと同じ長さですが、wrap要素は表示する部分のみを表示し、残りの部分はoverflow: hiddenプロパティをスケールすることで残りの部分を隠します.
次に、リストを左にドラッグして、前後の内容を順に表示します.最初はここで少し日差しが明るいのは、リストを引いたとき
負の値をtranslateX( - N px)に拡大し、右から左にドラッグします.
下図のように.0 pxでは、最初のコンテンツが表示され、すべてのコンテンツを含むリスト自体がx軸に対して負の値、すなわち、コンテンツのwidthを左にドラッグします.
wrapは、コンテンツを表示するテレビ要素であり、静止したままであり、要素のリストがwidthのコンテンツを左に引き出し、2番目の要素が表示されます.
このように引張力を調整することで、nextおよびprevを達成することができる.
しかし、無限のスライドを実現するには、いくつかのテクニックが必要です.
5番目の要素(最後の要素)から最初の要素を移動する場合は、現在のslide wrapが最後の要素を指している場合、最初の要素に直接ドラッグできるかどうかを考えますが、トランザクションによって前に移動するすべての動きが表示されます.4->5->1ではなく、4->5->4,3,2->1です.
でも5以降プラス1が1になった時に交通の流れを抜いて直接最初に移動

<div class="slide_wrap">
       <div class="slide_box">
                <div class="slide_list">
                    <div class="slide_content box1">1</div>
                    <div class="slide_content box2">2</div>
                    <div class="slide_content box3">3</div>
                    <div class="slide_content box4">4</div>
                    <div class="slide_content box5">5</div>
                </div>
            </div>
            <div class="slide_btn_box">
                <button type="button" class="slide_btn_prev btn">prev</button>
                <button type="button" class="slide_btn_next btn">next</button>
            </div>
            <ul class="slide_pagination"></ul>
        </div>

まずhtmlの構造は次のようになります.理解ブログを書いてすぐに整理したdivタグプロジェクトをするときにリストをul/olに書けばいいです.
コードを1行1行見て、どうやって仕事をしますか?理解しながら見ればすぐに理解できる

const slideList = document.querySelector(".slide_list");
const slideContents = document.querySelectorAll(".slide_content");
const slideBtnNext = document.querySelector(".slide_btn_next");
const slideBtnPrev = document.querySelector(".slide_btn_prev");
const slideLen = slideContents.length;
const slideWidth = 400;
const slideSpeed = 300;

slideList.style.width = `${slideWidth * (slideLen + 2)}px`;

let firstChild = slideList.firstElementChild;
let lastChild = slideList.lastElementChild;
let clonedFirst = firstChild.cloneNode(true);
let clonedLast = lastChild.cloneNode(true);

slideList.appendChild(clonedFirst);
slideList.insertBefore(clonedLast, slideList.firstElementChild);

slideList.style.transform = `translateX(-${slideWidth}px)`;

let curIndex = 0;
let curSlide = slideContents[curIndex];

slideBtnNext.addEventListener("click", () => {
  if (curIndex < slideLen) {
    slideList.style.transition = `${slideSpeed}ms`;
    slideList.style.transform = `translateX(-${slideWidth * (curIndex + 2)}px)`;
  }

  if (curIndex === slideLen - 1) {
    setTimeout(() => {
      slideList.style.transition = `${0}ms`;
      slideList.style.transform = `translateX(-${slideWidth}px)`;
    }, slideSpeed);
    curIndex = -1;
  }

  pageDots[curIndex === -1 ? slideLen - 1 : curIndex].classList.remove(
    "dot_active"
  );
  curIndex += 1;
  pageDots[curIndex].classList.add("dot_active");
});

slideBtnPrev.addEventListener("click", () => {
  if (curIndex >= 0) {
    slideList.style.transition = `${slideSpeed}ms`;
    slideList.style.transform = `translateX(-${slideWidth * curIndex}px)`;
  }
  console.log(curIndex);
  if (curIndex === 0) {
    setTimeout(() => {
      slideList.style.transition = `${0}ms`;
      slideList.style.transform = `translateX(-${slideWidth * slideLen}px)`;
    }, slideSpeed);

    curIndex = slideLen;
  }

  pageDots[curIndex === slideLen ? 0 : curIndex].classList.remove("dot_active");
  curIndex -= 1;
  pageDots[curIndex].classList.add("dot_active");
});