[英]Bootstrap carousel with pagination - current slide not active in navigation when using carousel control
我制作了一個使用分頁而不是圓點的導航輪播。
使用頁碼導航時,它可以正常工作並添加了活動類。 當您使用控件(向左和向右)導航時,它將正確地轉到下一頁/上一頁,但是導航中的活動類不會更改。
有問題的頁面在這里
它來自使用以下代碼的jsfiddle: http : //jsfiddle.net/juddlyon/Q2TYv/10/
據我所知,我遵循了jsfiddle中的示例。 什么地方出了錯?
// invoke the carousel
$('#myCarousel').carousel({
interval: false
});
/* SLIDE ON CLICK */
$('.carousel-linked-nav > li > a').click(function() {
// grab href, remove pound sign, convert to number
var item = Number($(this).attr('href').substring(1));
// slide to number -1 (account for zero indexing)
$('#myCarousel').carousel(item - 1);
// remove current active class
$('.carousel-linked-nav .active').removeClass('active');
// add active class to just clicked on item
$(this).parent().addClass('active');
// don't follow the link
return false;
});
/* AUTOPLAY NAV HIGHLIGHT */
// bind 'slid' function
$('#myCarousel').bind('slid', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
您正在使用的示例中使用的是更高版本的引導程序。 本次活動slid
被重命名為slid.bs.carousel
。
因此,綁定到新事件將為您工作。
$('#myCarousel').bind('slid.bs.carousel', function() {
// remove active class
$('.carousel-linked-nav .active').removeClass('active');
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
// select currently active item and add active class
$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');
});
引導文檔的相應鏈接: http : //getbootstrap.com/javascript/#carousel-events
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.