javascript - Twitter Bootstrap Carousel Height goes to 0px and extra div appears

I have a strange problem with Twitter Bootstrap Carousel. Please have a look at /

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.

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

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.

Share edited Oct 2, 2012 at 16:25 Florent 12.4k10 gold badges50 silver badges58 bronze badges asked Oct 1, 2012 at 15:12 David Brooks 7592 gold badges16 silver badges29 bronze badges

2 There are a few js errors on your website. I can see errors on the page and facebox.js, vmprices.js, vmsite.js. Are you using mootools and jquery together ?? – automaticAllDramatic Commented Oct 1, 2012 at 15:22

Add a ment |

1 Answer 1

Sorted by: Reset to default 8

This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the ment 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/extensions/core-enhancements/performance/mootools/15748

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

http://www.littledonkey

Beware though that this disables mootools pletely so somethings may stop working as expected...

Cheers,

Adam

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Twitter Bootstrap Carousel Height goes to 0px and extra div appears - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)