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

Кто шарит в джаваскрипт?

Есть слайдер, все работает как надо, но когда добавляю следующие слайдеры, его кнопки крутят карточки первого. Как сделать чтобы джаваскрипт работал для каждого слайдера отдельно?

const wrapper = document.querySelector(".wrapper");
const carousel = document.querySelector(".carousel");
const firstCardWidth = carousel.querySelector(".card").offsetWidth;
const arrowBtns = document.querySelectorAll(".wrapper i");
const carouselChildrens = [...carousel.children];
id:'carousel_1';

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

// Get the number of cards that can fit in the carousel at once
let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);


// Add event listeners for the arrow buttons to scroll the carousel left and right
arrowBtns.forEach(btn => {
btn.addEventListener("click", () => {
carousel.scrollLeft += btn.id == "left" ? -firstCardWidth : firstCardWidth;
});
});

const dragStart = (e) => {
isDragging = true;
carousel.classList.add("dragging");
// Records the initial cursor and scroll position of the carousel
startX = e.pageX;
startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
if(!isDragging) return; // if isDragging is false return from here
// Updates the scroll position of the carousel based on the cursor movement
carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
}

const dragStop = () => {
isDragging = false;
carousel.classList.remove("dragging");
}

const infiniteScroll = () => {


// Clear existing timeout & start autoplay if mouse is not hovering over carousel
clearTimeout(timeoutId);
if(!wrapper.matches(":hover")) autoPlay();
}

const autoPlay = () => {
if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false
// Autoplay the carousel after every 2500 ms
timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 25000);
}
autoPlay();

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);
wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);

<div class="wrapper" id="carousel_1">
<i id="left" class="fa-solid fa-angle-left"><img src="<?=SITE_TEMPLATE_PATH?>/images/left_arrow.svg" class="arrow_slider_svg"/></i>
<ul class="carousel">
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
<li class="card"></li>
</ul>
<i id="right" class="fa-solid fa-angle-right"><img src="<?=SITE_TEMPLATE_PATH?>/images/right_arrow.svg" class="arrow_slider_svg"/></i>
</div>

>>303893642
Джаваскрипт устарел пиши на jQuery

>>303893756
Делаю сайт по нужде. Всё понял, осталось слайдеры эти ебаные сделать. Вникать в синтаксис этого всего ради решения одной проблемы я охуею, это не хтмл с сиэсэсом

>>303893748
id я тут писал в надежде через id решить проблему, но нихуя не сработало

>>303893642
У тебя состояние всех каруселей в одной переменной, на переключение тоже одни и те же функции. Если ты не программист и просто свалилась задача, проще всего будет скопировать всё три раза и сделать startScrollLeft1, startScrollLeft2, startScrollLeft3 и т.д.

Ты нашёл ВСЕ кнопки:
const arrowBtns = document.querySelectorAll(".wrapper i");
После чего на ВСЕ эти кнопки повесил один и тот же обработчик, которые не учитывает, какую карусель должен дёргать.
Переписывай

>>303893959
Или не три, а сколько нужно, в общем

>>303893959
А как отбить программы от друг друга? Когда вставляю одну за другой всё помирает

>>303894229
Ты второй набор кода хочешь написать для второй карусели? Переменные переименуй во второй части

>>303893756
это рофл?

>>303894288
Прихуячил ко всем переменным цифру 2, но всё равно не работают оба кода

>>303893978
Я не писал этот код, а дернул откуда-то, потому что его достаточно легко визуально изменить в отличии от всяких слик-слайдеров и оул-каруселей.
Если бы он мог нормально размножаться всё было бы великолепно.

Можно как-то сделать, чтобы кнопки учитывали id класса карусели?

>>303894872
Да, делай не document.querySelector, а wrapper.querySelector

>>303895243
wrapper1, wrapper2 и т.д. Сами wrapper1, wrapper2 бери через getElementById("carousel_1")

>>303895325
Вот так?

>>303895633
const wrapper1 = document.getElementById("carousel_1")
const carousel1 = wrapper1.querySelector(".carousel")
...
const wrapper2 = document.getElementById("carousel_1")
const carousel2 = wrapper1.querySelector(".carousel")


Мне кажется, на этом этапе тебе будет проще задать это бредогенератору по типу чатгпт, он справится. Просто скопируй ему три своих первых поста

>>303896217
Во-втором случае carousel_2, конечно же

>>303896217
Охуеть! Чатгпт реально прислал рабочий код! Правда теперь он листает все слайдеры одновременно. Но уже что-то

Благодарю за наводочку
Лучи добра

>>303897019
Так и продолжай с ним, типа "этот листает одновременно, сделай чтобы отдельно". Такую шаблонную задачу с ним можно вырулить

>>303897784
А если ещё самому немного думать и говорить "может быть вот так? Я вот прочитал что можно вот так", то можно охуеть от результата

>>303897784
В общем, всё получилось, один костыль и всё сработало
Благодарю ещё раз, прикольная хуйня этот гпт

>>303897868
Ну это уже если в прикол эту тупую хуйню доучивать, но вообще если её занесло в бред, то без толку что-то делать