CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Zack
Zack

Reputation: 13

Bootstrap carousel ( TypeError: Object [object Object] has no method 'carousel' )

I get this every time when i call this $('.carousel').carousel(); on .carousel class that wraps everything

I added all code here so you can check http://jsfiddle.net/m5HBa/

When I try on my localhost I get

Bootstrap carousel ( TypeError: Object [object Object] has no method 'carousel' )

I really have nothing else to try, I made sure to:

  1. Include latest jquery before bootstrap
  2. Bootstrap.js does include carousel object ( by default )
  3. My code is within document.ready()

Any suggestions really appreciated

Upvotes: 1

Views: 1903

Answers (2)

Alexandre Mendes
Alexandre Mendes

Reputation: 119

First of all you gonna need to set up the "id" of your Indicators and Controls, with the same "id" you put on first div of your carousel.

After that, all data you need to rotate at the carousel, will need to be inside the tag by the tag . What you did was put 2 ""carousel-inner" at the code.

Here is a code that may work for you.

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

<!-- Wrapper for slides -->
<div class="carousel-inner">
    <div class="item active">
      <img src="http://i.imm.io/1g9kc.png" alt="...">
      <div class="carousel-caption">aaaaa</div>
    </div>
     <div class="item">
      <img src="http://i.imm.io/1g9kF.png" alt="...">
          <div class="carousel-caption">gggggg</div>
    </div>
    <div class="item">
      <img src="http://getbootstrap.com/2.3.2/assets/img/bootstrap-mdo-sfmoma-01.jpg"     alt="...">
      <div class="carousel-caption">ccccc</div>
    </div>
 </div>

<!-- Controls -->
  <a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="icon-next"></span>
  </a>

</div>

Upvotes: 0

Joe
Joe

Reputation: 15538

It works fine if you use the right syntax:

<div class="carousel-inner"> <!-- All slides go inside .carousel-inner -->
    <div class="item active">
        <img src="http://i.imm.io/1g9kc.png" alt="..." />
        <div class="carousel-caption">aaaaa</div>
    </div>
    <div class="item">
        <img src="http://i.imm.io/1g9kF.png" alt="..." />
        <div class="carousel-caption">gggggg</div>
    </div>
</div>

The href of the .carousel-control links and the data-target of your indicators has to be id of your carousel. You originally had #carousel-example-generic but you carousel's id is #carousel-example-captions.

Here it is working: http://jsfiddle.net/m5HBa/2/

Upvotes: 1

Related Questions