Implementation of tweeter-bootstrap-carousel v2.3.2

Question

I am having problems implementing a bootstrap carousel. Can anyone take a look at the following html and js and give me instructions on how to implement the slide..js has not been edited and the carousel is installed on the hero’s case. Am I implementing an api carousel? How to identify the carousel that I use in a .js file? Thank you

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

Answer 1

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

I think you need to add something like this to run it:

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

Answer 2

Note: this answer was originally for Bootstrap 2.3.2 (maybe not working with version 3)

You must place the element class on all slides and the active class on the first slide. It 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 as Christopher said, you need to use this function to initiate it.

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

Answer 3

I understand that

 <div class="carousel"> 

Must be

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

where id is something like Arrows. href.

Answer 4

You have no elements in your sample code. to make it work, you need to have at least two elements in your carousel inner div.

• create second element
• make sure the first element has an active class; it starts to roll the ball.
• bare code should look like this

.

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

Answer 5

This is in Joomla 3.1.1 with a Protostar template that is based on Bootstrap. I did not get a carousel for an automatic cycle. This worked for me:

Use custom html module, add this code: (change img scr text, text and subtitle 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> 

These adjustments in the index.php of your template are to prevent conflicts between scripts, it disables mootools, which causes the carousel to open and close before the 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']);