Carousel images are stacking when they're not suppose to Bootstrap 3.3.7

Question

I want to create a carousel having two slides, a caption for each slide, and controls for sliding forwards and backwards.

Does anyone know why the images are stacking???

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <div class="carousel slide" data-ride="carousel" data-interval=”false”>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" 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" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

score 1 · Accepted Answer · answered Apr 27 '18 at 22:14

To be able to take advantage of Bootstrap's components, you need to respect the classes they provide in their documentation, or use the components via JS so that you can configure them yourself.

In this case, you changed a class: instead of using item, you used carousel-item, and that stopped it from working. I changed data-interval to 600 in the example below, so that you can see it working.

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <div class="carousel slide" data-ride="carousel" data-interval="600">
    <div class="carousel-inner">
      <div class="item active">
        <img class="d-block img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="item">
        <img class="d-block img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
      <div class="item">
        <img class="d-block img-fluid" src="/Virginian_banner.jpg">
        <div class="carousel-caption">
          <h3>HelloWorld</h3>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" 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" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  crossorigin="anonymous"></script>

Carousel images are stacking when they're not suppose to Bootstrap 3.3.7

1 Answers1