Search code examples
htmlcsscarouselbootstrap-carousel

html Bootstrap carousel (slide in bootstrap)

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]

enter image description here

Solution

  • 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