Implementing twitter bootstrap carousel v2.3.2

Question

I am having trouble implementing the bootstrap carousel. Can anyone look at the following html and js and give me instructions on how to implement the slide. The .js has not been edited and the carousel is installed on the body hero unit. Do I implement the carousel api? How do I define the carousel I am using within the .js file? Thanks.

<div class="carousel">

  <!-- Carousel items -->
  <div class="carousel-inner">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
      </div>  

  </div>      

 <!-- Carousel nav -->

  <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>

Koan

i think bootstrap is hooked into classes with one $().carousel(); type call. – Portillo

Answer 1

The documentation for Bootstrap Carousel is available here: http://twitter.github.com/bootstrap/javascript.html#carousel

I guess you would need to add something like this to get it running:

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>

Peppi

Answer 2

Note: this answer was originally for Bootstrap 2.3.2 (may not work with version 3)

You have to put the class "item" on all of your slides and the class "active" on the first slide. This worked for me.

<div class="carousel">
  <div class="carousel-inner">


<!-- your slide -->

     <div class="hero-unit item active">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
     </div> 

  </div>
</div>

And like Christopher said you need to use this function to initiate it.

<script type="text/javascript">
$(function(){
   $('.carousel').carousel();
});
</script>

Oology

i didn't have active on my first slide and it was a total wtf moment – Bligh

Answer 3

My understanding is that

<div class="carousel">

Needs to be

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

where the id is whatever the "Arrows"' href is.

Cognizable

Answer 4

You have no items in your example code. to get it to work you need to have at least two items, with in your carousel-inner div.

1. create a second item
2. make sure the first item has the active class; this starts the ball rolling
3. the bare code should look like this

.

<div class="carousel-inner">
   <div class="active item">…</div>
   <div class="item">…</div>
   <div class="item">…</div>
</div>

Tinkle

Answer 5

This is in Joomla 3.1.1 with the Protostar template which is based on Bootstrap. I did't get the carousel to automticly cycle. This worked for me:

Use a Custom html module, add this code: (change the img scr, alt text and caption text to customize)

<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators" style="list-style: none;">
        <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="images/headers/maple.jpg" alt="imagetext 1" />
            <div class="carousel-caption">
                <h4>Exampletext 1</h4>
            </div>
        </div>
        <div class="item">
            <img src="images/headers/raindrops.jpg" alt="imagetext 2" />
            <div class="carousel-caption">
                <h4>Exampletext</h4>
            </div>
        </div>
        <div class="item">
            <img src="images/headers/windows.jpg" alt="imagetext 3" />
            <div class="carousel-caption">
                <h4>Exampletext</h4>
            </div>
        </div>
    </div>

    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

<!-- Call Carousel --> 
<script type="text/javascript">
(function($){$('.carousel').carousel({ interval: 5000, pause:'hover'});
})(jQuery);
</script>

This adjustments in the index.php of your template is to prevent confict between scripts, it disables mootools which causes the carousel to open and close beween slides:

// CSUTOM disable mootools-more.js
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-core.js']);
unset (JFactory::getDocument()->_scripts['/jomaatcms/media/system/js/mootools-more.js']);

Tolmach