Теоретически работает аналогично вашему коду, работоспособность не проверял, ибо все плохо
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 и т.д.