CODEWITHSUNDEEP
twitter-bootstrap
Learner
Learner

Reputation: 493

BootStrapJS - carousel

I have tried making slideshow of images using Carousel. However the picture never appears. I suspect linking of css,js from my local pc is the problem.But all my tries are in vain.

     *<!DOCTYPE html>
    <html>
    <head>
      <title>Animal</title>
      <link href = "bootstrap-3.3.6-dist/css/bootstrap.min.css" rel = "stylesheet">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
       <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
        <style>
#navigation {
  margin-top:125px;
  }
</style>
    </head>
    <body>
    <div class="container">
       <div id="sub1" class="col-md-4">
          <img src="welgevonden.jpg" alt="logo" style="float-left;width:100px;height:100px;position:absolute;">
       </div>
       <div id="sub2" class="col-md-8">
        <h1> Animal </h1>
        <h4>  Game  </h4>
       </div>

      <nav class="navbar navbar-inverse" id="navigation">
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">AboutUs</a></li>
        <li><a href="#">ConatackUs</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
</nav>
    <div id="myCarousel" class="col-md-12 carousel slide">
        <!-- 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="rhino.jpg" alt="Rhino" width="500" height="500">
          </div>

          <div class="item">
            <img src="ele.jpg" alt="Elephant" width="500" height="500">
          </div>

          <div class="item">
            <img src="tiger.jpg" alt="Tiger" width="500" height="500">
          </div>

          <div class="item">
            <img src="lion.jpg" alt="Lion" width="500" height="500">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
    </div>
    </body>
    </html>*

Kindly someone help.

My file directory

folder |- bootstrap-3.3.6-dist - css,js,fonts |- myfirstsite.html |- all my images

Below is the output that I am getting.enter image description here

Upvotes: 0

Views: 105

Answers (2)

Hardik Gondalia
Hardik Gondalia

Reputation: 3717

Try this:

<div id="myCarousel" class="col-md-12 carousel slide">
    <!-- 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="rhino.jpg" alt="Rhino" width="500" height="500">
      </div>

      <div class="item">
        <img src="ele.jpg" alt="Elephant" width="500" height="500">
      </div>

      <div class="item">
        <img src="tiger.jpg" alt="Tiger" width="500" height="500">
      </div>

      <div class="item">
        <img src="lion.jpg" alt="Lion" width="500" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>
</body>
</html>

Remove the comma from class name

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7109

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div id="myCarousel" class="carousel slide">
    <!-- 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="http://placehold.it/500x500/#f00" alt="Rhino" class="img-responsive center-block">
      </div>

      <div class="item">
        <img src="http://placehold.it/500x500/#f0f" alt="Elephant" class="img-responsive center-block">
      </div>

      <div class="item">
        <img src="http://placehold.it/500x500/#00f" alt="Tiger" class="img-responsive center-block">
      </div>

      <div class="item">
        <img src="http://placehold.it/500x500/#333" alt="Lion" class="img-responsive center-block">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
  </div>
</div>

Why you gave that comma on carousel class, just after col-xs-12? by default, it will its parent's width, you don't need to define col- width there.

Upvotes: 1

Related Questions