Click here to Skip to main content
15,177,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Have a look at this code. The image slider does not work.

XML
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
</head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
    <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>


    <script>
        $(document).ready(function () {
            $('.carousel').carousel({
                interval: 2000
            })
        });
    </script>
<body>
    <div class="page_container">
            <div id="myCarousel" class="carousel slide span12" >
        <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>
        <div class="carousel-inner">
            <div class="item active">
              <img src="http://zurb.com/blog/system/images/877/original/interchange.jpg?1369951689" width="100%">
                <div class="carousel-caption">
                    <h4>First label</h4>
                    <p>A working Bootstrap carousel example.</p>
                </div>
            </div>
            <div class="item">
              <img src="http://zurb.com/blog/system/images/877/original/interchange.jpg?1369951689" width="100%">
                <div class="carousel-caption">
                    <h4>Second label</h4>
                    <p>This is the second slide text.</p>
                </div>
            </div>
            <div class="item">
                <img src="http://zurb.com/blog/system/images/877/original/interchange.jpg?1369951689" width="100%">
                <div class="carousel-caption">
                    <h4>Third label</h4>
                    <p>Take note of the 'active' and 'slide' classes.</p>
                </div>
            </div>
        </div>

    </body>
</html>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900