CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcarousel
ProEvilz
ProEvilz

Reputation: 5455

TwitterBootstrap 3 Carousel not working?

I seem to be having problems with Bootstrap's carousel. The last time I implemented one was when I was using Bootstrap 2.xx. Ripping from the 2.xx example code pages worked fine. But when I do the same, the carousel does not seem to work. Doesn't slide, nothing. I have included Bootstrap 3 CDN and the paths work. I have also included Jquery at the bottom of the page, the one they gave with the code, that is also still a live link. Any solutions/advice is highly appreciated.

Thankyou

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Veyern Gaming</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">>
        <link rel="stylesheet" href="css/style.css"/>
        <!-- Latest compiled and minified CSS -->
         <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
      </head>
      <body>
    <div class="container">
    <!--Navbar-->
        <div class="navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html>Home</a></li>
                <li><a href="">Forum</a></li>
                <li><a href="">Vote</a></li>
                <li><a href="">Store</a></li>
                <li><a href="">Stats</a></li>
            </ul>
        </div>
    <!--Image Slider-->
        <div id="carousel-example-generic" class="carousel slide">
          <!-- 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="http://placehold.it/300x100" alt="">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x100" alt="">
                </div>
                <div class="item">
                    <img src="http://placehold.it/300x100" alt="">
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                <span class="icon-next"></span>
            </a>
        </div>
    </div>
    <!-- Scripts-->
        <script src="http://code.jquery.com/jquery.js"></script>
      </body>
    <html>

Upvotes: 0

Views: 4542

Answers (1)

m90
m90

Reputation: 11812

Bootstrap's JavaScript components depend on jQuery, therefore you have to load the library before you load the components.

From the Bootstrap docs:

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

There's no reason your closing part can't look like:

    </div>
</div>
<!-- Scripts-->
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
  </body>
<html>

Upvotes: 4

Related Questions