Карусельное соединение, независимое перекатывание в сторону ⇐ Jquery

[Anonymous]

У меня есть страница с несколькими строками карусели, но всякий раз, когда я нажимаю кнопку «Далее» или «Предыдущая», чтобы показать другие элементы карусели, это влияет на все карусели, а не только на ту, на которую вы нажали.Я пробовал разделить их на частичные представления, чтобы каждый js выполнялся только в своем контексте, но это все та же проблема.
Я хочу иметь возможность видеть следующий элемент и предыдущий независимо от другого
Если возможно, я хотел, чтобы js получал только элементы внутри частичного представления, но если есть другое решение, я готов услышатьjs:

Код: Выделить всё

$(document).ready(function () {
const multipleItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia('(min-width: 576px)').matches) {
const carousel = new bootstrap.Carousel(multipleItemCarousel, {
interval: false
})

var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();

var scrollPosition = 0;

$('.carousel-control-next').click(function () {
if (scrollPosition < carouselWidth - (cardWidth * 4)) {
scrollPosition += cardWidth;
$('.carousel-inner').animate(
{ scrollLeft: scrollPosition },
600
);
}
});

$('.carousel-control-prev').click(function () {
if (scrollPosition > 0) {
scrollPosition -= cardWidth;
$('.carousel-inner').animate(
{ scrollLeft: scrollPosition },
600
);
}
});
}
else {
$(multipleItemCarousel).addClass('slide');
}

});

Подробнее здесь: https://stackoverflow.com/questions/783 ... ependently