5

I have to create a Carousel using Bootstrap. I'm still very new to it so I don't know a whole lot. I cant understand why the images are not being shown but only the text. I've been looking it up for the past few hours and still cannot understand what I'm doing wrong or missing etc. I feel like banging my head against a wall. Can anyone help or any info would be really appreciated.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">    
</head>

<body>
  <div id="Mycarousel" class="carousel">

    <ol class="carousel-indicators">
      <li class="item0" data-target="#Mycarousel" data-slide-to ="0" class="active"></li>
      <li class="item1" data-target="#Mycarousel" data-slide-to ="1"></li>
      <li class="item2"  data-target="#Mycarousel" data-slide-to ="2"></li>
    </ol>

    <div class="carousel-inner">
      <div class="item active">
        <img src="img/cars.jpg" alt="cars" class="img-responsive">
      </div>

      <div class="item"></div>
        <img src="img/waterflower.jpg" alt="waterflower" class="img-responsive">
      </div>

      <div class="item"></div>
        <img src="img/cutehedgehog.jpg" alt="cutehedgehog" class="img-responsive">
      </div>

      <a class="carousel-control" href="#Mycarousel" data-slide="prev"></a>
      <span class="icon-prev"></span>

      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.7/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>
Mahib
  • 3,977
  • 5
  • 53
  • 62
Bailey123
  • 51
  • 1
  • 1
  • 4

1 Answers1

2

Looks like you didn't make the scaffolding right. See the extra closing "</div>" you put for the second and third slide.

<div class="item"></div>
 <img src="img/waterflower.jpg" alt="waterflower" class="img-responsive">
</div>

Should be something like;

<div class="item">
 <img src="img/waterflower.jpg" alt="waterflower" class="img-responsive">
</div>

Here is a working copy courtesy of W3Schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">      
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="Los Angeles" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
      </div>
    
      <div class="item">
        <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="New york" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Mahib
  • 3,977
  • 5
  • 53
  • 62