У меня на сайте две разные карусели; 1 с автоматическим скольжением и 1 без. Для тех, кто этого не делает, я использую пользовательские js для создания разбивки на страницы.
Проблема в том, что во втором, упомянутом выше, я удалил класс «слайд», но он по-прежнему автоматически скользит.
Поскольку у меня есть другая карусель, которая должна автоматически скользить, я не могу изменить интервал bootstrap.js на false. (Я также не хочу включать на страницу отдельный скрипт с тем, который мне нужно исправить, потому что он является частью шаблона сайта, и это становится беспорядочным).
Вот мой jsFiddle со всем кодом. http://jsfiddle.net/cindyg/UNKeL/4/
Вы можете видеть, что содержащий div не имеет класса "слайд":
<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
});