Я пытаюсь использовать как Owl Carousel, так и Bootstrap для создания вкладок с непрерывной карусели для навигации по вкладкам. Я также хочу, чтобы эти вкладки автоматически переключались.Обновить страницу «Сова Карусель» на вкладке «Событие» + «Бутстрап»
Вот визуальная ссылка:
А вот скрипка:
https://jsfiddle.net/j28md74n/
Основного JS, что я использую (я уже закомментирован область где я застрял):
var owlTab = $(".tab-carousel.owl-carousel");
owlTab.owlCarousel({
navigation: false,
dots:true,
navigationText: [
"<i class='fa fa-angle-left'></i>",
"<i class='fa fa-angle-right'></i>"
],
items : 4,
lazyLoad : false,
autoPlay : false,
draggable: true,
stopOnHover : true,
paginationSpeed : 1000,
transitionStyle:"fade",
responsive: true,
loop: true,
rewindNav: true,
});
$(document).ready(function() {
if ($('.tab-carousel.owl-carousel').length){
$('.tab-carousel.owl-carousel .owl-item').attr("role", "presentation");
$('.tab-carousel.owl-carousel .owl-item:first-child').addClass('active');
};
$(".tab-carousel.owl-carousel .owl-item").click(function() {
$(".tab-carousel.owl-carousel .owl-item").removeClass('active');
$(this).addClass("active");
});
});
var tabCarousel = setInterval(function() {
var tabs = $('.tab-carousel.owl-carousel .owl-item'),
active = tabs.filter('.active'),
next = active.next('.owl-item'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
var indexNum = active.index();
console.log(indexNum);
if (indexNum > 2){
$('.owl-pagination .owl-page:eq(0)').removeClass("active");
$('.owl-pagination .owl-page:eq(1)').addClass("active");
// Here's where I want to change the owl carousel 'page'...to page '2'
};
if (indexNum <= 2){
$('.owl-pagination .owl-page:eq(0)').addClass("active");
$('.owl-pagination .owl-page:eq(1)').removeClass("active");
// Here's where I want to change the owl carousel 'page' ...to page '1'
};
toClick.trigger('click');
}, 6000);
Я могу выполнить большинство из того, что я хочу, однако, когда «.active» .owl-item - это пятый элемент или выше (т. на другой странице совой карусели "), что также обновляется страница сова-карусели. На странице сова-карусели 4 предмета. В настоящее время, как у меня есть, если «.owl-item» проходит через пятый элемент, страница сова-карусель остается на первом.
Заранее благодарим за любые идеи!