Recently, I've taken an interest in using Bootstrap 5 for the design of my website. I wanted to incorporate a carousel for showcasing my coffee products, with only 3 items visible at a time when the navigation buttons are clicked.
Currently, the carousel container displays 3 items, but when I navigate using the buttons, the 4th item is not shown as intended. I'd like the carousel to rotate and include the 4th item while still displaying only 3 items at a time.
Below is the HTML code for my carousel:
<div class="container mt-5">
<div class="carousel-container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
... (carousel items) ...
</div>
</div>
Here is the link to my Bootstrap stylesheet:
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
And here are the scripts used:
<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I tried adding a JavaScript function to address the issue:
JavaScript File: 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) {
... (JavaScript logic) ...
});
Script in HTML:
<script src="js/script.js"></script>
This is the 4th item that I want to display when navigating through the carousel:
<!-- Fourth carousel item (hidden initially) -->
<div class="product-item d-none">
... (fourth item details) ...
</div>