Bootstrap Carousel Not working

StackOverflow https://stackoverflow.com/questions/9353294

  •  27-10-2019
  •  | 
  •  

Question

I'm trying to implement the Twitter Bootstrap carousel, and so far I've been unsuccessful. I have the following page:

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset="utf-8">
  <title>Fluxware: Play, learn and build games</title>
  <meta name="description" content="Home page for Fluxware">
  <meta name="author" content="Tim Butram">

  <!-- CSS Stylesheets -->
  <link href="../bootstrap/css/bootstrap.css" rel="stylesheet">

  <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

  <!--For shitty webbrowsers -->
  <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/sbn/trunk/html5.js></script>
  <![endif]-->

  <!-- Favicon -->
  <link rel="favicon" href="images/favicon.ico">
</head>

<body>

  <!-- Navbar -->

  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Play</a></li>
          <li><a href="#">Learn</a></li>

          <li><a href="#">Build</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Grid -->
  <div class="container">
  <div class="row">

    <div class="span12">
      <div class="hero-unit">
    <div id="myCarousel" class="carousel">
          <div class="carousel-inner">
            <div class="active item"><img src="/images/1.png" /></div>
        <div class="item"><img src="./images/2.png" /></div>
        <div class="item"><img src="./images/3.png" /></div>
          </div>

      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
      </div>

      <div class="row">
        <div class="span4">
           <a class="btn btn-large">Play</a>
       <p>Play games created with Fluxware.</p>

        </div>

    <div class="span4">
      <a class="btn btn-large">Learn</a>
      <p>Learn how to create games and game assets</p>
    </div>

    <div class="span4">
          <a class="btn btn-large">Build</a>

      <p>Use the Fluxware tools to create game.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script src="../bootstrap/js/jquery.js"></script>
  <script src="../bootstrap/js/bootstrap-carousel.js"></script>

  <script src="../bootstrap/js/bootstrap-transition.js"></script>
</body>
</html>

And everything seems to render correctly, except for the carousel. From reading the Bootstrap page, it appears that I need to stick a

$('.myCarousel').carousel();

somewhere, but I have no clue as to where, how or why. In addition to that, in the Firefox error console, I get the two errors

$ is undefined

in bootstrap-carousel.js [line 125] and

$ is not a function

in bootstrap-transition.js [line 22]

Was it helpful?

Solution

Clearly jQuery wasn't loaded correctly.
Try loading the two scripts in the page <head>.

The code to run the carousel is

<script>
// Load this when the DOM is ready
$(function(){
  // You used .myCarousel here. 
  // That's the class selector not the id selector,
  // which is #myCarousel
  $('#myCarousel').carousel();
});
</script>

You can put it either in the <head> after the two other scripts
or where the other scripts are now.

OTHER TIPS

Had the same problem.

Recently had the same problem, it seems in the current version of Bootstrap, you must also include a class called slide.

<div id="myCarousel" class="carousel slide span12">

You defined as id not a class , So you should start carousel by this code of jquery , so replace 

$('#myCarousel').carousel();

instead of

$('.myCarousel').carousel();

I was using Django's JQuery (I don't know the version) and it was not working. However, it works with Jquery 1.7.1.

If you're struggling getting a Bootstrap carousel slideshow to work -- Here's a template with positionable controls, and a progress navbar at the bottom that tracks the slides.

[http://codepen.io/TheNickelDime/][1]

<div class="Slideshow_carousel-wrapper container-fluid">
    <span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
    <div class="carousel slide" data-ride="carousel"  ... </div>    
    <span class="Slideshow-ctl-R" onclick="carousel_right()"></span>

</div>

   <div class="container-fluid Slideshow_progress-bar">     
        <ul id="slideshow_progress" class="Slideshow_progress"></ul>
    </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top