我的网站上有两个不同的轮播;1个自动滑动,1个不自动滑动。对于没有的我使用自定义 js 来创建分页。
问题是,在上面提到的第二个中,我删除了“slide”类,但它仍然是自动滑动的。
由于我有另一个需要自动滑动的轮播,我无法将 bootstrap.js 间隔更改为 false。(我也不想在页面上包含我需要修复的单独脚本,因为它是站点模板的一部分并且会变得混乱)。
这是我的 jsFiddle 和所有代码。http://jsfiddle.net/cindyg/UNKeL/4/
可以看到包含的 div 没有“slide”类:
<div id="myCarousel" class="carousel">
我看到人们发布了关于相反问题的帖子,例如Bootstrap Carousel Not Automatically Sliding,并应用了一些提到的技术,但无济于事。
这是我添加的用于获取分页的自定义 js:
$(document).ready(
function() {
$('#myCarousel').each(
function() {
var html = '<div class="carousel-nav " data-target="' + $(this).attr('id') + '"><ul>';
for(var i = 0; i < $(this).find('.item').size(); i ++) {
html += '<li><a';
if(i == 0) {
html += ' class="active"';
}
var item = $(this).find('.item').get(i);
html += ' href="#"> ' + $(item).attr('data-title') + '</a></li>';
}
html += '</ul></li>';
$(this).after(html);
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();
}
).bind('slid',
function(e) {
var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul');
var index = $(this).find('.item.active').index();
var item = nav.find('li').get(index);
nav.find('li a.active').removeClass('active');
$(item).find('a').addClass('active');
if(index == 0) {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
}
if(index == nav.find('li').size() - 1) {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
} else {
$('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
}
}
);
$('.carousel-nav a').bind('click',
function(e) {
var index = $(this).parent().index();
var carousel = $('#' + $(this).closest('.carousel-nav').attr('data-target'));
carousel.carousel(index);
e.preventDefault();
}
);
$('.carousel').carousel('cycle'); // Start the animation automatically
});