Question

我有一个没有指示符按钮的Twitter Bootstrap 3轮播。而不是那些指示器按钮，我使用选项卡（我在我的CSS中相应地设置）。通过这种方式，用户可以了解每张幻灯片的内容（基于标签标签），因此他更容易找到他感兴趣的幻灯片。

whatIsCarousel

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

我希望这种方式可以帮到你：

Bootply ：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类，并将其添加到具有相同索引的选项卡中。

Answer 2

试试这个

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav li').length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to')) +1;
            if(count+1 == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});

带有标签的轮播：当轮播滑到下一张或上一张幻灯片时，调整活动标签

2 个答案: