我设置了 bootstrap carousel.下一张和上一张幻灯片正常工作，但幻灯片的链接不一样.
下面是带有幻灯片链接的轮播示例:
<div id="seriesCarousel" class="轮播幻灯片"><div class="容器"><div class="carousel-inner"><div class="item" data-id="2"><文章></文章><div class="item" data-id="5"><文章></文章>
<!-- 幻灯片的链接--><div class="accordion-inner"><ul><li data-target="#seriesCarousel" data-slide-to="2"><a href="javascript: void(0);">名称1<li data-target="#seriesCarousel" data-slide-to="5"><a href="javascript: void(0);">名称2
我想给链接中的 data-slide-to 标签指定一个特定的数字，然后它应该指向幻灯片编号(data-id) 出现在 data-slide-to 中.
使用我开发的解决方案它不起作用并且链接指向轮播数组元素而不是它的 data-id 标记.例如，如果我有一个 data-slide-id 编号为 1，则它指向旋转木马数组的第一个元素.
有没有办法让链接指向特定的幻灯片?
我想我不明白你想做什么.您可以使用 data-slide-to 在 jQuery 中执行一些覆盖默认功能的操作，以获得正确的图像..
$('.carousel-indicators li').click(function(e){e.stopPropagation();$('#myCarousel').carousel($(this).data('slide-to')-1);});按顺序链接
链接不整齐..
但是，引导程序轮播旨在按顺序显示图像，并且显示相应链接的图像设置为活动..因此您可以单击第三个链接打开第二个链接，但第二个链接将设置为活动.. 您也可以覆盖此功能.但是，我不确定您为什么要这样做，因为在使用下一个和上一个按钮时可能会造成一些混乱.
更新 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){转到 = 索引；返回假；}});$('#myCarousel').carousel(goTo);});示例
对你来说，它会是这样的:
$('.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){转到 = 索引；返回假；}});$('#seriesCarousel').carousel(goTo);});I put up the bootstrap carousel. The slides next and prev works correctly but it isn't the same for the slides' link.
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-to tag into the links and then, it should point up to the slide number (data-id) present into the data-slide-to .
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-id tag of it. For example, if i have a data-slide-id number 1, it point up to the element number one of the carousel's array.
There's a way to do that the links point up to a specific slide?
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-to to get the correct image..
$('.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.
Update 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);
});
这篇关于Bootstrap 轮播数据幻灯片链接问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
