twitter-bootstrap 带标签的轮播：当轮播滑动到下一张或上一张幻灯片时调整活动标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21981553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Carousel with tabs: adjust active tab when carousel slides to next or previous slide
提问by Geoffrey De Smet
I have a Twitter Bootstrap 3 carousel without indicator buttons. Instead of those indicator buttons, I use tabs (which I style accordingly in my CSS). This way, the user has an idea what each slide is (based on the tab label), so it's easier for him to go to the slide he's interested in.
我有一个没有指示器按钮的 Twitter Bootstrap 3 轮播。我没有使用那些指示器按钮，而是使用选项卡（我在 CSS 中对其进行了相应的样式设置）。这样，用户就知道每张幻灯片是什么（基于标签标签），因此他可以更轻松地转到他感兴趣的幻灯片。
The HTML looks like this:
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>
The CSS is irrelevant, but source code is here.
CSS 无关紧要，但源代码在这里。
The tabs works well: When I click on one of the tabs, the carousel slides to the appropriate slide, and the correct tab becomes active (highlights).
选项卡运行良好：当我单击其中一个选项卡时，轮播会滑动到相应的幻灯片，并且正确的选项卡变为活动状态（突出显示）。
The carousel controls (left and right) work partially: when I click on one of the controls (or it slides automatically), the carousel slides to the appropriate slide, but the active tab does not change. How do I make the active tab change when the carousel slides?
轮播控件（左和右）部分工作：当我单击其中一个控件（或自动滑动）时，轮播会滑动到相应的幻灯片，但活动选项卡不会更改。如何在轮播滑动时更改活动选项卡？
Here's what I got so far in my javascript:
到目前为止，这是我在 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?
});
});
回答by BENARD Patrick
I hope this way could help you :
我希望这种方式可以帮助你：
Bootply: http://www.bootply.com/116312
引导：http: //www.bootply.com/116312
Js:
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');
});
});
Focus on:
专注于：
$('.nav li').removeClass('active').eq(to).addClass('active');
You remove activeclass from all tabs, and add it to the tabs that has the same index.
您active从所有选项卡中删除类，并将其添加到具有相同索引的选项卡中。
回答by cangak
try this
试试这个
$(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;
});
});
