Stasy11
@Stasy11
The best epta

Как правильно подключить две owl карусели с навигацией?

Подключил две Owl карусели
Вот так:
$(document).ready(function() {
$('#owl-films, #owl-serials').owlCarousel({
    loop:false,
    margin:10,
    nav: false,
    dots:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }

})
var owl=$("#owl-films");
	owl.owlCarousel();
	$("#films-next").click(function(){
		owl.trigger("next.owl.carousel");
	});
	$("#films-prev").click(function(){
		owl.trigger("prev.owl.carousel");
});
var owl=$("#owl-serials");
	owl.owlCarousel();
	$("#serials-next").click(function(){
		owl.trigger("next.owl.carousel");
	});
	$("#serials-prev").click(function(){
		owl.trigger("prev.owl.carousel");
});


Проблема в том, что кнопки навигации не работают, точнее они инициализируются только для одной из каруселей.
Одна навигация (кнопки с классом next, prev) прокручивают сразу обе карусели.
Как правильно прописать навигацию для каждой карусели свою?
  • Вопрос задан
  • 869 просмотров
Пригласить эксперта
Ответы на вопрос 3
@lagudal
как вариант, задайте разные классы и подключайте каждый по отдельности - больше кода конечно но будет 100% работать
Например (свои классы и настройки ставьте)
<script>
			$(function() {
				// Owl Carousel
				
				$('.owl-carousel-1').owlCarousel({
					items: 4,
					margin: 20,
					loop: false,
					nav: false,
					dots: false,
					autoplay: false,
					responsiveClass:true,
					responsive:{
						0:{
							items:1,
							nav: false,
						},
						480:{
							items:2,
							nav: false,
						},
						768:{
							items:3,
							nav: false,
						},
						1024:{
							items:4,
							nav: false,							
						}
					},
					navText: [
					"<span class='icon-slider-back'></span>",
					"<span class='icon-slider-forwards'></span>"
					],
					beforeInit : function(elem){
						//Parameter elem pointing to $("#owl-demo")
						random(elem);
					}
					
				});
				$('.owl-carousel-2').owlCarousel({
					items: 3,
					margin: 10,
					loop: true,
					nav: true,
					dots: false,
					autoplay: false,
					responsiveClass:true,
					responsive:{
						0:{
							items:1,
							nav: false,
						},
						768:{
							items:2,
						},
						1024:{
							items:3,
						}
					},
					navText: [
					"<span class='icon-slider-back'></span>",
					"<span class='icon-slider-forwards'></span>"
					],
					beforeInit : function(elem){
						//Parameter elem pointing to $("#owl-demo")
						random(elem);
					}
					
				});
			});	
			
		</script>
Ответ написан
Комментировать
IlyaDeveloper
@IlyaDeveloper
Top Rated | Expert Web Developer
Рекомендую лучше юзай swiper
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы