twitter-bootstrap – My carousel doesn't change Bootstrap images

Question:

It just doesn't change the carousel images!

    <div id="carouselSite" class="carousel slide" data-ride="carousel"> 
        <ol class="carousel-indicators">
            <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
            <li data-target="#carouselSite" data-slide-to="1"></li>
            <li data-target="#carouselSite" data-slide-to="2"></li>
        </ol>


        <div class="carousel-inner">

            <div class="carousel-item active">

                <img src="img/lanchonete/slide1.jpg" class="img-fluid d-block">
            </div>

            <div class="carousel-item">

                <img src="img/lanchonete/slide2.jpg" class="img-fluid d-block">
            </div>

            <div class="carousel-item">

                <img src="img/lanchonete/slide3.jpg" class="img-fluid d-block">
            </div>

        </div>

          <a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
              <span class="sr-only">Anterior
              </span>

           </a>
           <a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
              <span class="carousel-control-next-icon"></span>
              <span class="sr-only">Proximo
              </span>
       </a>
  </div>

Answer:

Dude you can have two problems. I noticed that you are using the img-fluid class this class is wrong, you should use w-100 to make the images 100% wide.

Then you have to make sure you are calling jQuery before Bootstrap JSs. Fix your code working perfectly in this example. Just remove img-fluid and put w-100 and call the scripts files in the correct order.

<link type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"  />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

<div id="carouselSite" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators">
        <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
        <li data-target="#carouselSite" data-slide-to="1"></li>
        <li data-target="#carouselSite" data-slide-to="2"></li>
    </ol>


    <div class="carousel-inner">

        <div class="carousel-item active">

            <img src="http://unsplash.it/600/280" class="img-fluid d-block w-100">
        </div>

        <div class="carousel-item">

            <img src="http://unsplash.it/601/280" class="img-fluid d-block w-100">
        </div>

        <div class="carousel-item">

            <img src="http://unsplash.it/602/280" class="img-fluid d-block w-100">
        </div>

    </div>

      <a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
          <span class="sr-only">Anterior
          </span>

       </a>
       <a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
          <span class="carousel-control-next-icon"></span>
          <span class="sr-only">Proximo
          </span>
   </a>
</div>

NOTE: Also make sure which version of Bootstrap you are using and if you are not using code from one version with JSs from another version.

Scroll to Top