How to improve the slider code?

Question

JavaScript

Hello everyone, I'm taking my first steps in OOP in JavaScript. I decided to write a small slider, tell me how to improve the code or point out errors. Thank you all in advance!

function Slider(obj) {
    let indexSlide = 1;

    this.slides = document.querySelectorAll(obj.slides);
    this.prevBtn = document.querySelector(obj.prevBtn);
    this.nextBtn = document.querySelector(obj.nextBtn);
    this.auto = obj.auto;
    this.dots = obj.dots;

    // Функция инициализации слайдера
    this.createSlider = () => {
        if (this.auto) {
            setInterval(this.nextSlide, this.auto);
        }
        if (this.dots) {
            createDots();
            let dot = document.querySelectorAll('.dot');
            for (let i = 0; i < dot.length; i++) {
                dot[i].addEventListener('click', (e) => {
                    let index = e.target.getAttribute('data-index');
                    this.currentSlide(index);
                });
            }
        }

        this.prevBtn.addEventListener('click', this.prevSlide);
        this.nextBtn.addEventListener('click', this.nextSlide);
        this.showSlides();
    }

    // Функция отображения слайда 
    this.showSlides = (index = 1) => {
        let dot = document.querySelectorAll('.dot');

        (index > this.slides.length) ? indexSlide = 1: false;
        (index < 1) ? indexSlide = this.slides.length: false;

        for (let i = 0; i < this.slides.length; i++) {
            this.slides[i].classList.remove('active');
        }

        for (let i = 0; i < dot.length; i++) {
            dot[i].classList.remove('active');
        }

        this.slides[indexSlide - 1].classList.add('active');
        dot[indexSlide - 1].classList.add('active');
    }

    this.prevSlide = () => this.showSlides(--indexSlide);
    this.nextSlide = () => this.showSlides(++indexSlide);
    this.currentSlide = index => this.showSlides(indexSlide = index);

    // Функция динамического создание точек переключателей
    let createDots = () => {
        let dotContainer = document.querySelector('.dots');

        for (let i = 0; i < this.slides.length; i++) {
            let dot = document.createElement('button');
            dot.classList.add('dot');
            dot.setAttribute('data-index', i + 1);
            dotContainer.appendChild(dot);
            if (i == 0) {
                dot.classList.add('active');
            }
        }
    }
}

// Инициализация слайдера
const slider1 = new Slider({
    slides: '#gallery img',
    prevBtn: '.prev',
    nextBtn: '.next',
    auto: false,
    dots: true
});

slider1.createSlider();

Answer 1

It is very common for a slider to have a thumb legend. An important point or the ability to synchronize between different sliders. It seems like Swiper had it. And most importantly - the onSlide events and so on.