Как заставить загрузочные кнопки «Далее» и «Предыдущее» в карусели работать? ⇐ CSS

[Anonymous]

Недавно заинтересовался Bootstrap 5 для дизайна моего веб-сайта. Я решил добавить карусель для своих кофейных товаров, которая будет отображать только 3 продукта одновременно при нажатии кнопок со стрелками вправо и влево.
Мой текущий класс контейнера html показывает 3 элемента, но когда я нажимаю кнопки, он не двигается и не показывает мой четвертый элемент. Я как бы хочу, чтобы он показывал четвертый элемент, когда я нажимаю кнопку «влево» и «вправо» или кнопку «Далее» и «Предыдущий», сохраняя при этом 3 элемента, показанные в карусели.
Вот мой html-блок карусели:

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

Popular Now






Latte Art Coffee
With Milk

₱ 60+








Espresso Coffee
With Milk
₱ 70+








Mocha Coffee
With Chocolate
₱ 80 +








Affogato
With Milk
₱ 90   +










Previous



Next

моя загрузочная ссылка:

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

мой сценарий начальной загрузки:

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

Я попробовал добавить функцию JavaScript, но результат тот же:
/js/script.js

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

// Initialize the Bootstrap Carousel component without waiting for the entire document to load
var myCarousel = document.querySelector('#carouselExampleControls');
var carousel = new bootstrap.Carousel(myCarousel, {
interval: false, // Disable automatic sliding
wrap: false // Disable looping of carousel items
});

// Show/hide the fourth carousel item based on slide events
myCarousel.addEventListener('slide.bs.carousel', function (event) {
var slideFrom = event.detail.from;
var slideTo = event.detail.to;
var items = myCarousel.querySelectorAll('.carousel-item');

// Hide the fourth item if sliding from the first item
if (slideFrom === 0) {
items[3].classList.add('d-none');
}
// Show the fourth item if sliding to the first item
if (slideTo === 0) {
items[3].classList.remove('d-none');
}
});

скрипт в моем html:

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

это четвертый элемент, который я хочу показывать при нажатии стрелок влево или вправо:

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

Affogato
With Milk
₱ 90  +

Подробнее здесь: https://stackoverflow.com/questions/781 ... ousel-work