My Bootstrap does not exchange images

Asked

Viewed 725 times

3

Simply do not exchange 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>
twitter-bootstrap

  • Good evening, Renan. You remembered to reference the bootstrap.js or bootstrap.min.js file to your project. Because Carosel needs one of these files, as stated in the Bootstrap documentation.

3 answers

0


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

Then you have to check if you are calling jQuery before 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>
<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>

OBS: Also make sure which version of Bootstrap vc you are using and you are not using the code of one version with the Jss of another version.

  • I had forgotten even man, thank you very much.

  • @Renanf.Andrade I’m glad it worked out there. Whenever you ask a question here on the site and have an answer that suits you and has solved your problem consider marking it as accepted by clicking next to the arrows of the answer you choose.

  • opa, thanks, I’m new here, I don’t know how it works right, but I’ve done the procedure worth man

  • @Renanf.Andrade quiet young man! We are here to learn and to teach tb :) It is not good to leave questions already answered and with accepted answers open, because the system keeps putting it in the list of unanswered questions, even if already having a correct answer, so it is indicated to mark when the answer has met you.

-1

Worked with me fixing the position of the DIVS closure

    </nav>
        <div id="carouselSite" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active ">
                <img src="img/01.jpg" class="img-fluid d-block "></div>
                    <div class="carousel-item">
                <img src="img/02.jpg" class="img-fluid d-block "></div>
                    <div class="carousel-item">
                <img src="img/03.jpg" class="img-fluid d-block "></div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselSite" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
        </a>
            <a class="carousel-control-next" href="#carouselSite" role="button" data-slide="next">
                <span class="carousel-control-next-icon"></span>
        </a>

Ricardo Galante

</body>
</html>

-1

On the site Layout It there are templates that you can download and check out. Save it in a folder called Layoutit so you don’t get lost. The file comes zipped with CSS, Bootstrap, Jquery.

https://www.layoutit.com

When entering click on Bootstrap Buider. In the menu on the left click Javascript and select Carousel. Drag to the center of the page In the top menu click download to view the code you can copy or download full that comes with bootstrap, java, css.

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.