2

BS carousel 的箭头不会来回移动项目

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

4

7 回答 7

16

我有同样的问题，这是因为我的页面是基于滚动的，所以我放了一个小脚本来平滑每个以 . 开头的链接的滚动#。这搞砸了左右按钮，因为它们使用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;
            }
        }
    });
});

我刚刚添加了一个带有 thw href 属性的异常：

$(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

于 2014-12-27T03:59:09.333 回答
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">…&lt;/div>
    <div class="item">…&lt;/div>
    <div class="item">…&lt;/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>

希望有帮助！

于 2013-07-09T01:32:49.323 回答
1

我的 Carousel 也不工作了，我改变了很多东西。但是最后我发现了问题；我的问题是平滑滚动和 wow.js。实际上，由于平滑滚动，我无法按下上一个或下一个按钮。当我尝试按下按钮时，页面正在向下或向上。因此，我改变了我的平滑初始化和哇初始化。

平滑滚动：

$(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 初始化：

$(document).ready(

function() {

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

}

); 新哇（）.init（）；

现在，水平平滑结束了，我的问题不知何故消失了。我希望，它会有所帮助。

于 2016-06-30T11:48:40.847 回答
1

同样的事情发生在我身上。原来我只是在 jquery 脚本之前有引导脚本。改变了这个，然后它工作正常。

于 2020-05-19T17:02:32.157 回答
0

将 JQ 和 bootstrap.min.js 放在页面底部的 </body> 之前，如下所示：

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

请记住，您需要一个适用于您的引导程序版本的 JQ 版本。我正在使用引导程序版本 2，所以我需要 JQ 1.11.1

于 2014-12-02T15:12:46.880 回答
0

Bootstrap 依赖于 jQuery。查看他们的入门模板。

于 2014-01-29T09:10:55.643 回答
0

您需要在 jQuery 之后包含 boostrap.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>
于 2013-07-08T21:45:34.033 回答