0

So, my images don't show in my carousel. I have tried changing the name several times and nothing happens. I have even put the images into the img folder. I'm using Grayscale template by the way. Can someone explain?

<div class="container">
  <br>
  <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="store" alt="store" width="460" height="345">
      </div>

      <div class="item">
        <img src="art.jpg" alt="art" width="460" height="345">
      </div>

      <div class="item">
        <img src=".jpg" alt="Flower" width="460" height="345">
      </div>

      <div class="item">
        <img src="img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
Ramello Cason
  • 1
  • 1
  • 1

2 Answers2

1

There are multiple issues here:

  1. After looking at the carousel example, it appears that the containers under the wrapper (i.e. <div class="carousel-inner" role="listbox"> are missing the class carousel-item

    <div class="item">
    <img src="art.jpg" alt="art" width="460" height="345">`

    So add that class name:

    <div class="item carousel-item">
    <img src="art.jpg" alt="art" width="460" height="345">`

  2. Some of the source attributes of the image tags appear to have invalid filenames - e.g. <img src="store" alt="store" width="460" height="345">

  3. Unless you don't want them (perhaps you have different icons in mind), the next and previous icon containers are missing the classes icon-prev and icon-next: <span class="glyphicon glyphicon-chevron-left icon-prev" aria-hidden="true"></span>
  4. Also, you likely have done this, but ensure you have added the required CSS and JS files (see the Quick start section).

<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<div class="container">
  <br>
  <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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img src="https://lh5.googleusercontent.com/-H-d48F21u4Y/AAAAAAAAAAI/AAAAAAAAABU/axGFMUf4bwY/photo.jpg?sz=32" alt="store" width="64" height="64">
      </div>

      <div class="carousel-item">
        <img src="https://i.stack.imgur.com/C92ci.png?s=64&g=1" alt="art" width="64" height="64">
      </div>

      <div class="carousel-item">
        <img src="https://www.gravatar.com/avatar/fd047157030a440fa1f62e6e1ed87958?s=32&d=identicon&r=PG" alt="Flower" width="64" height="64">
      </div>

      <div class="carousel-item">
        <img src="https://www.gravatar.com/avatar/fa3b74688aaf69a2d65fd846b0a82c59?s=32&d=identicon&r=PG&f=1" alt="Flower" width="64" height="64">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
0

Your code shows that some image src attribute does not have extension and some don't have names and just extension. Also there must be some issue with your src attribute as you might not putting the correct image path. 

<img src="store" alt="store" width="460" height="345">
<img src=".jpg" alt="Flower" width="460" height="345">
Awais Mustafa
  • 151
  • 2
  • 9