html Bootstrap carousel (slide in bootstrap) - html

Question

Please help with this code.
I have three items and I want when I press next or previous it passes to an another item but it didn't work it stays fixed at the item 1. I already compared my code with many other codes and it seems to me right.
It's a simple carousel with two buttons next and previous but nothing happened when I press them
'''
<div id="featured-products-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target= "#featured-products-carousel" data-slide-to="0" class="active" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="1" ></li>
<li data-target= "#featured-products-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active image-container">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption text-left">
<h2>Product 1.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-1" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder ">
</div>
<div class="container">
<div class="carousel-caption">
<h2>Product 2.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-2" role="button">
learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<div class="carousel-item ">
<div class="carousel-placeholder">
</div>
<div class="container">
<div class="carousel-caption text-right">
<h2>Product 3.</h2>
<p>Your product description here.</p>
<p>
<a class="btn btn-lg btn-primary" href="#service-3" role="button">
Learn more..
</a>
</p>
</div>
</div>
</div>
<!--item-->
<a class="carousel-control-prev" href="#featured-products-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured-products-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!--carousel-->
'''
[![enter image description here][1]][1]

Answer 1

I'm guessing you are using Bootstrap version 5?
If so, a few things to check:
In the Bootstrap carousel example, the carousel uses data-bs-slide-to = "1" on the next button your one is data-slide-to="1", it's missing the 'bs' and that's the same with data-bs-ride and data-ride.
Check you correctly included the necessary Bootstrap JS file