2nd Day - Track Right Button on Carousel was done

2nd Day - Track Right Button on Carousel was done

·

1 min read

#HTML 

 <div class="carousel">
      <button class="carousel_leftButton none">
        <i class="fas fa-chevron-left"></i>
      </button>
      <div class="carousel_track-container">
        <ul class="carousel_track">
          <li class="carousel_slide">
            <img
              class="carousel_image"
              src="src/assets/images/assessment.png"
              alt="assessment"
            />
          </li>
          <li class="carousel_slide none">
            <img
              class="carousel_image"
              src="src/assets/images/experience.png"
              alt="experience"
            />
          </li>
          <li class="carousel_slide none">
            <img
              class="carousel_image"
              src="src/assets/images/recovery.png"
              alt="recovery"
            />
          </li>
        </ul>
      </div>
      <button class="carousel_rightButton">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>

# JS

trackRightSlide: () => {
    const slides = document.querySelectorAll(".carousel_slide");
    // console.log("slides", slides);

    let currentNumberOfSlide;
    slides.forEach((slide) => {
      if (slide.className == "carousel_slide") {
        let currentNumber = slide.getAttribute("number");
        currentNumberOfSlide = currentNumber;
      }
    });
    // console.log("currentNumberOfSlide", currentNumberOfSlide);

    const nextRightSlide = [...slides].filter(
      (slide) =>
        slide.getAttribute("number") == Number(currentNumberOfSlide) + 1
    );
    // console.log("nextRightSlide", nextRightSlide[0]);
    nextRightSlide[0].classList.remove("none");
    const theOtherSlides = [...slides].filter(
      (slide) => slide !== nextRightSlide[0]
    );
    theOtherSlides.forEach((otherSlide) => {
      otherSlide.classList.add("none");
    });
  },

If you want to use array method when you have document.querySelectorAll("").

document.querySelectorAll is like an array, but can use forEach or any loop statements.

Actually, they are only Nodelists. But we can not use document.querySelectorAll("").filter/find.

The better way let a = document.querySelectorAll(""), let arrayB = [...a], then we can use array methods.

Using Destructuring assignment to get correct format is the key point today.