Carousel button does not appear

Asked

Viewed 125 times

1

I tried to look for error of all that is way but I found no way

       <div id="carouselFritou" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
                        <img src="https://placehold.it/500x260" class="img-fluid d-block">

          </div>
          <div class="carousel-item">
                        <img src="https://placehold.it/500x260" class="img-fluid d-block">

          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselFritou" role = "button" data-slide = "prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Anterior</span>
        </a>
        <a class="carousel-control-next" href="#carouselFritou" role = "button" data-slide = "next" aria-hidden="true">
          <span class="carousel-control-next-icon"></span>
          <span class="sr-only">Proximo</span>
        </a>
      </div>
html css twitter-bootstrap

  • Which button would it be?

  • the button to move to the next img

  • It appears. I think you’re not seeing it because it’s white and the bottom of the page might be white too.

  • worst that only appears on the left side, the right does not appear at all

  • I thought it might be because of the framework, but it was wrong

  • The width of the Carousel is the same as the image, 500px?

  • I tested it here and it worked normal. If you can send a screen print for me to see.

  • Which buttons do you refer to, the navigation arrows or the indicators that are at the bottom indicating which slide you are on? If possible place an image indicating the problem

Show 3 more comments

1 answer

1


You have forgotten some lines of code. For example: "li’s" that contain data-target’s, one of the main mechanisms of Carousel. Follows the correction: 

 <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="https://placehold.it/500x260" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://placehold.it/500x260" alt="Second slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
 </div>

Test and tell me if it worked!

Browser other questions tagged html css twitter-bootstrap

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