Чтобы адаптировать код для работы с несколькими слайдерами, вы уже правильно начали с выбором всех элементов слайдера с `querySelectorAll`. Каждое действие с кнопками (предыдущий и следующий) надо привязать к конкретному слайдеру внутри цикла `forEach`. Обычно, если вам необходимо работать с несколькими элементами, то вы можете использовать `querySelectorAll` для их выборки.
Но поскольку вы хотите чтобы кнопки работали для каждого слайдера, вам не нужно изменять `querySelector` на `querySelectorAll` для выбора кнопок внутри каждого слайдера, потому что в каждом слайдере "предыдущая" и "следующая" кнопки уникальны.
Ваш текущий код уже должен работать для каждого слайдера отдельно, так как переменные `prev` и `next` устанавливаются для каждого слайдера внутри цикла `forEach`. Просто убедитесь, что обработчики событий на кнопки добавляются внутри тела `forEach`, чтобы они относились к соответствующим элементам для каждого слайдера:
```javascript
const sliders = document.querySelectorAll("[data-slider]");
sliders.forEach((slider) => {
const track = slider.querySelector("[data-slider-track]");
const prev = slider.querySelector("[data-slider-prev]");
const next = slider.querySelector("[data-slider-next]");
if (track) {
prev.addEventListener("click", () => {
// Код для прокрутки влево
});
next.addEventListener("click", () => {
// Код для прокрутки вправо
});
// остаток кода можно продолжить здесь
}
});
```
Таким образом, каждая кнопка "предыдущий" и "следующий" будет относиться к соответствующему слайдеру, и ваши слайдеры будут функционировать независимо друг от друга. При этом не забудьте добавить логику прокрутки слайдов внутри обработчиков событий, а также другую необходимую логику внутри цикла `forEach` для каждого слайдера.