As a part of building a new website, i created a slider using Class in JS. Since I’ve not used Class much, I’d like to know how to refactor the code for better readability (i think it has got good readability) and efficient.

1 main thing I’ve introduced is loading image URL from data attributes rather than direct img urls to reduce load on initial page loading. This was the main reason why I started creating this Class. I’m also planning on introducing another functionality for loading element rather than

class Slider {
  #imgHeight;
  #imgWidth;
  #sliderScrollWidth;
  #currentScroll;
  #slides = [];
  #sliderInterval = null;
  #slider = null;
  #slide = null;
  #sliderScrollArea = null;

  constructor(config = {}) {
    this.config = config;

    this.#imgHeight = null;
    this.#imgWidth = null;
    this.#sliderScrollWidth = 0;
    this.#currentScroll = 0;
    this.currentSlide = 1;
    this.slideCount = 0;
    this.gapBetweenSlides = null;

    // Dom Selectors
    this.#slides = [];

    // status
    this.sliderIsStopped = false;
    this.sliderIsPaused = false;

    this.init();
  }

  init() {
    this.createSlider();
    this.initializeSlides();
    this.assignSlideDimensions();
    if (this.config.autoplay) this.autoPlay();
  }

  createSlider() {
    this.#slider = document.getElementById(this.config.id);
    if (!this.#slider) {
      console.error(`Slider with id ${this.config.id} not found. Check your code. `);
      return;
    }

    this.#slides = this.#slider.getElementsByClassName("slide");
    this.#sliderScrollArea = this.#slider.querySelector(".slider__scrollarea");

    this.#sliderScrollWidth = this.#sliderScrollArea.scrollWidth;

    if (this.config.pauseOnHover) {
      this.#slider.addEventListener("mouseover", () => this.stopSlider());
      this.#slider.addEventListener("mouseout", () => this.playSlider());
    }

    if (this.config.sliderNavButtonVisible) {
      this.#slider.querySelector(".slider-prev-btn").addEventListener("click", () => {
        if (this.currentSlide <= 1) return;
        this.goToPrevSlide();
      });
      this.#slider.querySelector(".slider-next-btn").addEventListener("click", () => {
        if (this.currentSlide >= this.slideCount) return;
        this.goToNextSlide();
      });
    }
  }

  initializeSlides() {
    Object.values(this.#slides).map((slide) => {
      const imgURL = slide.getAttribute("data-img-url");
      const altText = slide.getAttribute("data-img-alt");
      slide.innerHTML = `<img src="${imgURL}" alt="${altText}" />`;
    });
    this.#slide = this.#slider.querySelector(".slide");
    this.slideCount = this.#slides.length;
  }

  autoPlay() {
    if (this.sliderIsStopped) return;
    this.#sliderInterval = setInterval(
      () => {
        if (this.currentSlide >= this.slideCount) {
          this.resetSlidePosition();
        } else {
          this.goToNextSlide();
        }
      },
      this.config.delay ? this.config.delay : 0
    );
  }

  goToNextSlide() {
    this.#currentScroll += this.#imgWidth + this.gapBetweenSlides;
    this.#sliderScrollArea.scrollTo({ left: this.#currentScroll });
    this.currentSlide += 1;
  }

  goToPrevSlide() {
    this.#currentScroll -= this.#imgWidth + this.gapBetweenSlides;
    this.#sliderScrollArea.scrollTo({ left: this.#currentScroll });
    this.currentSlide -= 1;
  }

  resetSlidePosition() {
    this.#sliderScrollArea.scrollTo({ left: 0 });
    this.#currentScroll = 0;
    this.currentSlide = 1;
  }

  stopSlider() {
    this.sliderIsStopped = false;
    clearInterval(this.#sliderInterval);
  }

  assignSlideDimensions() {
    this.#imgWidth = this.#slide.getBoundingClientRect().width;
    this.#imgHeight = this.#slide.getBoundingClientRect().height;
    const slidesWidth = this.#imgWidth * this.#slides.length;
    this.gapBetweenSlides = (this.#sliderScrollWidth - slidesWidth) / (this.#slides.length - 1);
  }
}