Question

112

Bootstrap Carousel Not working

rated 0 times [ 113] [ 1] / answers: 1 / hits: 64850 / 13 Years ago, sun, february 19, 2012, 12:00:00

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]

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lara

Add To Favorites

Follow

Total Points: 462

Total Questions: 100

Total Answers: 102

Location: Jersey

Member since Mon, Jun 14, 2021

3 Years ago

lara questions

1 How to watch for multiple values in Vue 3 script setup?

Thu, May 19, 22, 00:00, 2 Years ago

1 chrome.runtime.OnMessage.addListener returns duplicate messages

Tue, Jul 27, 21, 00:00, 3 Years ago

1 Using try catch in watch of Vue.js

Thu, Apr 1, 21, 00:00, 3 Years ago

1 NodeJS 12 SyntaxError: Unexpected token 'export'

Mon, Jul 27, 20, 00:00, 4 Years ago

1 In Blazor Server-Side how can I detect if the user tries to navigate off of the current page

Tue, Mar 17, 20, 00:00, 4 Years ago

View All

answered 13 Years ago bobbyallanh · Accepted Answer

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.