javascript - 带标签的旋转木马 : adjust active tab when carousel slides to next or previous slide

Question

我有一个没有指示器按钮的 Twitter Bootstrap 3 旋转木马。我没有使用那些指示器按钮，而是使用选项卡(我在我的 CSS 中相应地设置了样式)。这样，用户就知道每张幻灯片是什么(基于选项卡标签)，因此他可以更轻松地转到他感兴趣的幻灯片。

HTML 看起来像这样:

<div class="carousel slide" data-ride="carousel" id="whatIsCarousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="slide0.png">
        </div>
        <div class="item">
            <img src="slide1.png">
        </div>
        ...
    </div>
    <a class="left carousel-control" data-slide="prev" href="#whatIsCarousel">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" data-slide="next" href="#whatIsCarousel">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<ul class="nav nav-justified" id="whatIsCarouselButtons">
    <li class="active" data-target="#whatIsCarousel" data-slide-to="0">
        <a data-toggle="tab" href="#">Slide 0</a>
    </li>
    <li data-target="#whatIsCarousel" data-slide-to="1">
        <a data-toggle="tab" href="#">Slide 1</a>
    </li>
    ...
</ul>

CSS 无关紧要，但 source code is here .

这些选项卡运行良好:当我单击其中一个选项卡时，轮播会滑动到相应的幻灯片，并且正确的选项卡变为事件状态(突出显示)。

旋转木马控件(左侧和右侧)部分工作:当我单击其中一个控件(或它自动滑动)时，旋转木马滑动到适当的幻灯片，但事件选项卡不会改变。 如何在轮播滑动时改变事件标签页？

这是我到目前为止在我的 javascript 中得到的:

$(document).ready( function() {
    $carousel.carousel();
    $('#whatIsCarousel').on('slide.bs.carousel', function(e) {
        var from = active.index();
        var next = $(event.relatedTarget);
        var to = next.index();

        // Is to the index of the next slide?
        // How do I find tab that needs to be active next?
    });
});

Answer 1

希望以上方法能帮到你:

Bootstrap :http://www.bootply.com/116312

Js :

$(document).ready( function() {
    $('.carousel').carousel();
    $('#whatIsCarousel').on('slide.bs.carousel', function(e) {
        var from = $('.nav li.active').index();
        var next = $(e.relatedTarget);
        var to =  next.index();

        // This could interest you
        $('.nav li').removeClass('active').eq(to).addClass('active');

    });
});

关注:

$('.nav li').removeClass('active').eq(to).addClass('active');

您从所有选项卡中删除 active 类，并将其添加到具有相同索引的选项卡。