我把自举旋转木马放了。 下一张幻灯片和prev可正常工作,但幻灯片的链接不一样。
下面是带有幻灯片链接的轮播示例:
<!-- 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>
我想在 data-slide-to 标记中为链接指定一个特定的编号,然后它应该指向幻灯片编号( data-id )进入 data-slide-to 。
使用我开发的解决方案,它不起作用,链接指向carousel数组元素,而不指向它的 data-id 标记。 例如,如果我有一个 data-slide-id 数字1,它指向轮播数组的第一个元素。
有一种方法可以将链接指向特定的幻灯片吗?
答案 0 :(得分:8)
我想我不明白你想做什么。您可以在jQuery中使用data-slide-to
覆盖默认功能以获取正确的图像。
$('.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){
goTo = index;
return false;
}
});
$('#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){
goTo = index;
return false;
}
});
$('#seriesCarousel').carousel(goTo);
});
答案 1 :(得分:0)
你可以把你的链接(轮播指示符)放在div之外,如下面的“carousel-inner”类,它对你来说会很好。
**此处轮播指示符位于有序列表中。
<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>
但是如果你把指标放在轮播元素之外,那么你就可以通过点击它来浏览它,但是哪个幻灯片处于活动状态的默认指示将不起作用。
以下是关于carousel image slide的一项工作,您可以查看