CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
anobilisgorse
anobilisgorse

Reputation: 906

Bootstrap Carousel doesn't work properly

What do you think is the problem in here?

<html>
    <head>
    <meta charset="utf-8"> <!-- for character ">>" --> 
    <!-- solve problem for icon's flat UI -->

    <title>Welcome!</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">    
    <link href="css/bootstrap-theme.css" rel="stylesheet">  
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="javascript/jquery.js"> </script>
    <script src="javascript/jquery.validate.min.js"> </script>
    <script src="javascript/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="javascript/bootstrap.js"></script>
    <script src="javascript/carousel.js"></script>
  </head>

  <body>

  . . . . 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
    <img src="..." alt="...">
    <div class="carousel-caption">
    ...
    </div>
    </div>
    <div class="item">
    <img src="..." alt="...">
    <div class="carousel-caption">
    ...
    </div>
    </div>
    ...
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>

It doesn't show the exact carousel. Instead it shows some missing links, but it has the features of scrolling. Does it have something to do with the .js and .css that must be included? Any ideas?

Upvotes: 0

Views: 305

Answers (2)

Suganth G
Suganth G

Reputation: 5156

Use this in your code, hope this may helpful

You need to initilize by using this:

$('.carousel').carousel()

Upvotes: 0

Mark Hill
Mark Hill

Reputation: 1839

This looks like the exact code from the bootstrap website. Either way, the reason why missing links are showing up for you in this code is because you need to actually have a path set for your image source

...
<div class='item'>
    <img src='<!-- whatever the path to your image is -->'> <!-- this is what is missing -->
    <div class='carousel-caption'>
    </div>
    ...

Furthermore, I would change the id of your carousel to something that makes sense for your webpage and that is easy to track for you. When doing don't forget to change the 'href' attribute on the controls to match the id of the new carousel id. Otherwise if it is scrolling and such, then it seems you have it set up correctly. Just make sure you actually add a path for your images.

Upvotes: 1

Related Questions