Как автоматизировать слайдер на JS?

Question

[Qias]

HTML

<div class="BlockItems"></div>
    <div class="BlockItems"></div>
    <div class="BlockItems"></div>
    <div class="BlockItems"></div>
    <div class="BlockItems"></div>
                <div class="but"></div>
                <div class="but"></div>
                <div class="but"></div>
                <div class="but"></div>
                <div class="but"></div>

JavaScript

const BI = document.getElementsByClassName("BlockItems"); // собераем все классы блоков
const b = document.getElementsByClassName("but"); // собераем все классы кнопок
    let indexSlide = 0; // начальный слайд
    const maxBlock = BI.length-1; // максимальное количество блоков
    b[indexSlide].setAttribute("style", "background-color: white;"); // меняем цвет кнопки со стандартной индексанцией 0
    BI[indexSlide].setAttribute("style", "animation: op100 ease 2s;"); // включаем блок с индексацией 0 (тоесть первый)
    function RS() {
        clean();
        if (indexSlide >= maxBlock) {
            indexSlide = 0;
        } else {
            indexSlide++;
        }
        BI[indexSlide].setAttribute("style", "animation: op100 ease 2s;");
        b[indexSlide].setAttribute("style", "background-color: white;");
    }
    function clean() { // создаём функцию clean для упращения 
        for (let i = 0; i < BI.length; i++) { // создаём цикл форм где значением до которого нужно дойти это количество блоков i < BI.lenght
            BI[i].setAttribute("style", "animation: op0 ease 2s; display: none;"); // выключаем все блоки
            b[i].setAttribute("style", "") // делаем всем стандартный цвет (чёрный)
        }
    };
    for (let  i= 0;  i< b.length; i++) { // цикл где i < количество кнопок
        b[i].setAttribute("onclick", `but(${i})`); // передаём значение but(вставляем n число)
    }
    function but(n) { // вызываем функцию с n числом
        clean(); // очищаем иди к строке 106
        BI[n].setAttribute("style", "animation: op100 ease 2s;"); // используем n число для включения нужного блока
        b[n].setAttribute("style", "background-color: white;"); // перекрашиваем n кнопку
        indexSlide = n; // делаем n число главной страницей 
    }
    function LeftSlide() { // Нажимаем на левую стрелку и вызываем функцию LeftSlide()
        clean(); // очищаем
        if (indexSlide <=0) { // если индексированная странице меньше и равна 0 тогда делаем её равную максимальному количеству блоков
            indexSlide = maxBlock;
        } else { // убавляем индексированную страницу
            indexSlide--;
        }
        BI[indexSlide].setAttribute("style", "animation: op100 ease 2s;"); // 117
        b[indexSlide].setAttribute("style", "background-color: white;"); // 118
    }

Помогите с кодом, упрастите пж если можно.
А так есть проблема с авто переключением переписывал код раз 200 авто переключение переделываел ещё больше
Делаю для практики

Answer 1

[Mikhail Derkach]

Теоретически работает аналогично вашему коду, работоспособность не проверял, ибо все плохо

const BI = document.querySelectorAll('.BlockItems');
const b = document.querySelectorAll('.b');

const style1 = "background-color: white;"
const style2 = "animation: op100 ease 2s;"

let counter = 0;
const callback = (item, style) => item.setAttribute("style", style);

function clean() {
  BI.forEach(item => callback(item, style2));  
  b.forEach(item => callback(item, style1));  
}

function RS() {
  counter >= BI.length - 1 ? 0 : counter += 1;
  
  callback(BI[counter], `${style1}; display: none;`);
  b[i].removeAttribute("style");
}

b.forEach((item, index) => {
  item.addEventListener("click", () => {
    counter = index;
    callback(BI[index], style2);
    callback(b[index], style1)
  })
})

1) зачем на каждой итерации переопределять стили, тем более инлайнить их? classList.add()/.remove()/.toggle() ваш друг, раздавайте стили и сравнивайте с индексом итерации
2) если вы обрабатываете каждый элемент, используйте forEach
3) если вам нужно событие клика - устанавливайте прослушку, а не назначайте атрибутами
4) если нужно слайдить влево/вправо, сделайте одну функцию, которая будет прибавлять/убавлять значение и обрабатывать слайды по индексу

в целом очень сложно понять вашу мысль, тем более зачем и для чего вы это делаете.
если нужно тренироваться - порешайте задачи на codewars, freecodecamp и т.д.

Comments

[Qias]

Он работает на 10%

[Mikhail Derkach]

Qias, у вас есть референс - дерзайте. Хотите готовое решение - выкладывайте полностью исходники со стилями и т.д. на codepen.io, может я поправлю, когда время будет

[Mikhail Derkach]

Qias, тем более, я указывал на то, что я не тестировал этот код :)

[Qias]

Mikhail Derkach, Извини за мою резкость, я просто проинформировал, что работает на 10%