Twitter Bootstrap Carousel高度变为0px并出现额外的div

时间:2012-10-01 15:12:20

标签: javascript jquery twitter-bootstrap carousel

Twitter Bootstrap Carousel有一个奇怪的问题。请查看http://www.bettondesignwork.co.uk/cheapbeds4u/

目前有三个相同的图像。第一个图像加载正常,但当第二个图像在包含div的高度滑动时,动画为0px。除此之外,在旋转木马周围会产生额外的div。

实际的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>

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

非常感谢任何帮助。谢谢。

1 个答案:

答案 0 :(得分:8)

这是Joomla 3.0和Bootstrap轮播功能的问题。正如上面的评论中指出的,Mootools和jQuery默认在J3安装上一起运行。

我的修复是安装并激活此插件 - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748

这可以解决我的问题,如下所示:

http://www.littledonkey.net

请注意,这会完全禁用mootools,所以某些事情可能会按预期停止工作......

干杯,

亚当