Recently got interested on bootstrap 5 for my website design. I decided to add a carousel for my coffee items that will show only 3 products at same time when the right and left arrow buttons are clicked.
My current html container class is showing 3 items but when I press the buttons it doesn’t move and show my 4th item. I kind of want it to show the 4th item when i press the left and right or next and prev button while maintaining 3 items shown in the carousel
Here is my carousel html block:
<div class="container mt-5">
<div class="carousel-container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1 class="text-white fw-bold mb-3 mt-3" style="text-align: center;">Popular Now</h1>
<div class="d-flex justify-content-center align-items-center">
<!-- First carousel item -->
<div class="product-item">
<div class="product-info bg-dark text-light p-3">
<div class="product-image" style="background-image: url('/image/latte.jpg');"></div>
<div class="product-text">
<h5 class="mb-3">Latte Art Coffee</h5>
<p class="mb-2">With Milk</p>
<p class="mb-0 price-container">
₱ 60<span class="price-space"></span><button class="plus-btn">+</button>
</p>
</div>
</div>
</div>
<!-- Second carousel item -->
<div class="product-item">
<div class="product-info bg-dark text-light p-3">
<div class="product-image" style="background-image: url('/image/espresso.jpg');"></div>
<div class="product-text">
<h5 class="mb-3">Espresso Coffee</h5>
<p class="mb-2">With Milk</p>
<p class="mb-0">₱ 70<span class="price-space"></span><button class="plus-btn">+</button></p>
</div>
</div>
</div>
<!-- Third carousel item -->
<div class="product-item">
<div class="product-info bg-dark text-light p-3">
<div class="product-image" style="background-image: url('/image/mocha.jpg');"></div>
<div class="product-text">
<h5 class="mb-3">Mocha Coffee</h5>
<p class="mb-2">With Chocolate</p>
<p class="mb-0">₱ 80 <span class="price-space"></span><button class="plus-btn">+</button></p>
</div>
</div>
</div>
<!-- Fourth carousel item (hidden initially) -->
<div class="product-item d-none">
<div class="product-info bg-dark text-light p-3">
<div class="product-image" style="background-image: url('/image/affogato.jpg');"></div>
<div class="product-text">
<h5 class="mb-3">Affogato</h5>
<p class="mb-2">With Milk</p>
<p class="mb-0">₱ 90 <span class="price-space"></span> <button class="plus-btn">+</button></p>
</div>
</div>
</div>
<!-- End carousel items -->
</div>
</div>
</div>
<div class="carousel-controls-container">
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
my bootstrap link:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
my bootstrap script:
<script src="js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
I tried adding a JavaScript function but still I get the same result:
/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');
}
});
script in my html:
<script src="js/script.js"></script>
this is the 4th item i want to show when the arrows are clicked left or right:
<!-- Fourth carousel item (hidden initially) -->
<div class="product-item d-none">
<div class="product-info bg-dark text-light p-3">
<div class="product-image" style="background-image: url('/image/affogato.jpg');"></div>
<div class="product-text">
<h5 class="mb-3">Affogato</h5>
<p class="mb-2">With Milk</p>
<p class="mb-0">₱ 90 <span class="price-space"></span> <button class="plus-btn">+</button></p>
</div>
</div>
</div>