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

Question

[Stacy None]

Подключил две 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) прокручивают сразу обе карусели.
Как правильно прописать навигацию для каждой карусели свою?

Answer 1

[tyzberd]

как то так https://codepen.io/tyzberd/pen/GbJmpX?editors=0010

Comments

[Stacy None]

Вообще не работает навигация

[tyzberd]

классы поменяли, навигация внутри карусели?
пробуйте еще так https://codepen.io/tyzberd/pen/GbJmpX?editors=0010

[tyzberd]

если навигация за пределами карусели, то это нужно поменять carousel.find

[Stacy None]

tyzberd, Нет, вообще, даже карусель не отображается
https://codepen.io/Stanislavskiy11/pen/Kjpmgw

[tyzberd]

https://codepen.io/tyzberd/pen/MMwmve

Answer 2

[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>

Answer 3

[Пащук Илья]

Рекомендую лучше юзай swiper