Функция для карусели?

Question

[Nikita_Migushev]

Есть три слайдшоу - каждый со своей продуктовой линейкой.

Нужно сделать две универсальные функции для карусели: moveLeft и moveRight.

Для карусели используется три каунтера, каждый для своей продуктовой линии.

Как прописать единую функцию, которая принимала бы у себя в аргументе, какой каунтер нужно обновить?

Вот что получается на данный момент, но это не годится:

var productLine1Counter = 0
    var productLine2Counter = 0
    var productLine3Counter = 0

function slidesMoveRigth(counter, slider) {
        counter++
        slider.style.transition = 'margin-left 0.4s ease-in-out';
        slider.style.marginLeft = '-' + 33.1 * counter + '%';
        console.log(counter);
    }

    productLine1NextBtn.addEventListener("click", function() {
        slidesMoveRigth(productLine1Counter, productLine1CarouselSlider)
    })

Comments

[Alex]

Оберни в класс. И делай карусели экземплярами.

Answer 1

[Daniil Dubrava]

Реализация через класс Counter
https://jsfiddle.net/msxkwt2o/

Пример довольно примитивный, но показывает, как избежать дублирования на вашем примере.

С вашим же подходом, если у вас будет 50 слайдеров, то вам придется создавать как минимум 50 переменных для каждого счетчика. Это лишний код, лишние баги и неудобства. Поэтому в таких случаях используют конструкторы/классы (сахар для конструктора + прототип).