Question

我添加到我网站的Carousel表现得非常奇怪。在2的周期中，幻灯片向上滑动。父div的高度变为0px，子div的边距变为负边距。在bootstrap网站上的示例中，这不会发生。我从bootstrap网站复制了最新的代码，无法找到我做错的事。

如果有人能帮助我，我会很高兴。

http://humandemo.cloudaccess.host页眉顶部的标题。

使用的代码：

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>   
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
            </div>
            <div class="item">
                <img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
            </div>
        </div>
        <!-- Carousel controls -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

    </div>

Answer 1

我想这是mootools-more.js的工作。此脚本包含the Fx.Slide class：

幻灯片效果可以水平或垂直滑动元素。内容将在内部折叠。

尝试评论此脚本。

Answer 2

@Jeroen：我已经检查了你的网站，并通过“Inspect Element”尝试了一些Css的更改，按照我的说法你应该检查div id =“myCarousel”和div class =“carousel-inner”。如果他们已经设置了一些高度。希望这会对你有所帮助。

Answer 3

你的Bootsrap轮播代码是完美的，没有问题。你的另一个脚本可能有问题，我在codepen中使用了你的代码，它的工作非常好。

Answer 4

我在@Gleb Kemarsky回答后做了一些研究，谢谢你。确实mootools与bootstrap冲突，请参阅：https://github.com/joomla/joomla-cms/issues/475

修复方法是：

if (typeof jQuery != 'undefined') { 
(function($) { 
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}

问题bootstrap 3 Carousel将高度更改为0px并将marigin更改为-.....px

4 个答案: