My carousel does not exchange Bootstrap images

Navigation
3

Just do not trade 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>
    
asked by anonymous 02.06.2018 / 23:47

1 answer

0

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

Then you have to check if you are calling jQuery before the Bootstrap JSs. Repair your code working perfectly in this example. Just remove img-fluid and put w-100 and called the script files in the correct order. 

<link rel="stylesheet" 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><scriptsrc="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><divid="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:

    
03.06.2018 / 01:51
What is the Javascript Cache class? HTTP request within a company that uses proxy