jQuery Bootstrap 轮播数据幻灯片链接问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19950295/
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
Bootstrap carousel data-slide link issue
提问by Roberto Rizzi
I put up the bootstrap carousel. The slides next and prev works correctly but it isn't the same for the slides' link.
我设置了引导轮播。next 和 prev 的幻灯片工作正常，但幻灯片的链接不一样。
Below there is the carousel example with slides' link:
下面是带有幻灯片链接的轮播示例：
<!-- Carousel -->
<div id="seriesCarousel" class="carousel slide">
<div class="container">
<div class="carousel-inner">
<div class="item" data-id="2">
<article>
</article>
</div>
<div class="item" data-id="5">
<article>
</article>
</div>
</div>
</div>
</div>
<!-- Slides' links -->
<div class="accordion-inner">
<ul>
<li data-target="#seriesCarousel" data-slide-to="2">
<a href="javascript: void(0);"> name 1</a>
</li>
<li data-target="#seriesCarousel" data-slide-to="5">
<a href="javascript: void(0);"> name 2</a>
</li>
</ul>
</div>
I would like to give a specific number to the data-slide-totag into the links and then, it should point up to the slide number (data-id) present into the data-slide-to.
我想为链接中的data-slide-to标记提供一个特定的数字，然后它应该指向data-slide-to 中存在的幻灯片编号（data-id）。
With the solution that i've developed it doesn't work and the links point up to the carousel array element and not to the data-idtag of it. For example, if i have a data-slide-idnumber 1, it point up to the element number one of the carousel's array.
使用我开发的解决方案，它不起作用，链接指向轮播数组元素而不是它的data-id标签。例如，如果我有一个data-slide-id编号 1，它指向轮播数组的第一个元素。
There's a way to do that the links point up to a specific slide?
有没有办法让链接指向特定的幻灯片？
回答by Trevor
I guess I don't understand what your trying to do. You could do something in jQuery that overides the default functionality using your data-slide-toto get the correct image..
我想我不明白你想做什么。你可以在 jQuery 中做一些事情来覆盖默认功能，使用你的data-slide-to来获得正确的图像..
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
With the links in order
按顺序链接
With the links not in order..
链接不正常..
However The bootstrap carousel is designed to show images in order and which ever image is showing the corresponding link is set to active.. So you can click on the third link to open up the second link but the second link is going to be set to active.. You could override this functionality too. However I'm not sure why you would do it because it could cause some confusion when using the next and previous buttons.
但是，引导程序轮播旨在按顺序显示图像，并且显示相应链接的图像设置为活动..因此您可以单击第三个链接打开第二个链接，但第二个链接将设置为active.. 你也可以覆盖这个功能。但是，我不确定您为什么要这样做，因为在使用下一个和上一个按钮时可能会引起一些混乱。
Update 2
更新 2
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide-to');
$('.carousel-inner .item').each(function(index){
if($(this).data('id') == goTo){
goTo = index;
return false;
}
});
$('#myCarousel').carousel(goTo);
});
Example
例子
For you it would be something like:
对你来说，它会是这样的：
$('.menu-right-club .accordion-inner li').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide-to');
$('#seriesCarousel .carousel-inner .item').each(function(index){
if($(this).data('id') == goTo){
goTo = index;
return false;
}
});
$('#seriesCarousel').carousel(goTo);
});
回答by Tapan kumar
You can put your links ( carousel indicators ) just outside the div with class "carousel-inner"like below and it will work pretty fine for you.
你可以把你的链接（轮播指示器）放在 div 外面，类为“carousel-inner”，如下所示，它对你来说效果很好。
** Here the carousel indicators are in a ordered list.
** 此处轮播指示器位于有序列表中。
<div class="carousel slide" id="theCarousel" data-interval="3000">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
<li data-target="#theCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">Resting In Style</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
<div class="item ">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">The Dude Look</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
<div class="item ">
<img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
<div class="carousel-caption">
<h4 class="text-left">How z It??</h4>
<p class="text-left">Hi Everybody what's going on.....</p>
</div>
</div>
</div>
<a href="#theCarousel" class="carousel-control left" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a href="#theCarousel" class="carousel-control right" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
But if you put the indicators outside the carousel element then you will be able to navigate through it by clicking on it, but the default indication of which slide is active will not work.
但是，如果您将指示器放在轮播元素之外，那么您将能够通过单击它来导航它，但是哪个幻灯片处于活动状态的默认指示将不起作用。
Here is a piece of work on carousel image slider you can take a look
这是关于旋转木马图片幻灯片r的作品，您可以看看
