Как улучшить код слайдера?

Question

[Артем Гаврилюк]

Всем привет, делаю первые шаги в ООП на JavaScript. Решил написать небольшой слайдер, подскажите как можно улучшить код или укажите на ошибки. Заранее всем спасибо!

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();

Comments

[Павел Антонов]

Первое что бросилось в глаза - некоторые функции написаны стрелками, некоторые нет.

[Артем Гаврилюк]

Вспомнил, что стрелочная функция сохраняет контекст, поэтому можно не сохранять this в переменную

Answer 1

[Дмитрий]

Для слайдера очень частно нужно иметь легенду из thumb'ов. Важный момент или возможность синхронизироваться между разными слайдерами. Вроде как у Swiper это было. И самое главное - события onSlide и так далее.