Question

重现问题的步骤：

转到上面的链接，在菜单下，点击“Meet Our Team”
与左右箭头互动

实际结果：箭头没有移动项目（右上角的点指示符顺便说一下，它们是白色的，很难看到）

预期结果：箭头应来回移动物品

我怀疑这可能是一个CSS问题，或者与在选项卡内使用轮播的事实有关。

Answer 1

我遇到了同样的问题，这是因为我的页面是基于滚动的，所以我输入了一个小脚本来平滑以#开头的每个链接的滚动。这会拧紧左右按钮，因为它们使用href="#myCarousel" 为了解决这个问题，我在这里添加了一个例外情况这是我修改它之前的脚本：

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

我刚用hw属性添加了一个例外：

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if( $(this).attr("href")=="#myCarousel") return;//This is the exception
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

这个答案是一年半，但我希望它可以帮助别人。

编辑2015年3月12日：
您还可以使用data-target属性代替href

Answer 2

您的HTML格式是这样的吗？

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></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">…</div>
    <div class="item">…</div>
    <div class="item">…</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 3

我的旋转木马也没有工作，我改变了很多东西。但最后我发现了这个问题;我的问题是平滑滚动和wow.js.实际上，由于滚动顺畅，我无法按下prev或next按钮。当我尝试按下按钮时，页面正在向下或向上。因此，我改变了我的平滑初始化并且哇初衷。

平滑滚动：

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
    if( $(this).attr("href")=="#CarouselSlider") return;
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 900);
            return false;
        }
    }
});

}）;

以及Wow.js init：

$(document).ready(

function() {

    $("html").niceScroll({
        cursorcolor:"#ba8e16",
        scrollspeed :"100",
        cursorborder:"1px solid #cf9c11",
        horizrailenabled: "false",
        cursorborderradius: "0px"
    });

}

）; 新的WOW（）。init（）;

现在，横向平滑结束了，我的问题以某种方式消失了。我希望，这会有所帮助。

Answer 4

你需要在jQuery之后包含bootstrap.js才能使它工作。我还发现了一个链接到jQuery的错误：

<script type='text/javascript' src='/ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

应该是

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

Answer 5

Bootstrap依赖于jQuery。查看他们的getting-started template。

Answer 6

将JQ和bootstrap.min.js放在页面底部＆lt; / body＆gt;之前，如下所示：

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>

请记住，您需要一个适用于您的bootstrap版本的JQ版本。我使用的是bootstrap版本2，所以我需要JQ 1.11.1

Answer 7

我也发生了同样的事情。原来我只是在jquery脚本之前有bootstrap脚本。对此进行了更改，然后效果很好。

Twitter Bootstrap Carousel：正确＆amp;左箭头不起作用

7 个答案: