Question

I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/

At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .

Actual html:

<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
        <div class="carousel-inner">
            <div class="item">
                <img src="images/slideshow/homepage/01.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/slideshow/homepage/02.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/slideshow/homepage/03.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
        </div>
    </div>
</section>

Rendered HTML:

<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/slideshow/homepage/01.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/slideshow/homepage/02.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="images/slideshow/homepage/03.jpg" alt="" />
                <div class="carousel-caption"></div>
            </div>
        </div>
    </div>
</div>
</section>

Any help would be greatly appreciated. Thank you.

Answer 1

This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.

The fix for me was to install and activate this plugin – http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748

This fixes the problem for me as can be seen here:

http://www.littledonkey.net

Beware though that this disables mootools completely so somethings may stop working as expected…

Cheers,

Adam