Почему не работает вторая Owl Carousel?

Question

[Tutucu]

Здравствуйте, на сайте есть слайдер Owl Carousel 2, подключён нормально, всё хорошо работает, вот код подключения:

$(() => {
	let owl = $('.owl-carousel');
	owl.owlCarousel({
		// Options
		items: 5,
		margin: 10,
		loop: true,
		nav: true,
		dots: false,
		lazyLoad: true,
		
		responsive:{
			0:{
				items: 2,
			},
			480:{
				items: 3,
			},
			600:{
				items: 4,
			},
			800:{
				items: 5,
			}
		},
		
		// Events
		onChange: (event) => {
			//console.log(event);
		},
		onChanged: (event) => {
			let item = event.item.index;
			let pic_src = $('.owl-item').eq(item).find('img').attr('data-src');
			$('.owl_big_pic img').attr('src', pic_src);
		},
		
	});

    
	$('.btn_next').on('click', () => {
		owl.trigger('next.owl.carousel', [300]);
	});
	$('.btn_prev').on('click', () => {
		owl.trigger('prev.owl.carousel', [300]);
	});
	/**
	$(document).on('click', '.owl-item', function(){
		let pic_src = $(this).find('img').attr('data-src');
		$('.owl_big_pic img').attr('src', pic_src);
	});*/
});

<div class="row">
				<div class="owl_big_pic">
					<img src="" style="width:100%;" />
					<span class="nav btn_prev"></span>
					<span class="nav btn_next"></span>
				</div>
				<div class="owl-carousel owl-theme">
					<img class="owl-lazy" data-src="img/slider/slider8.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider9.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider10.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider11.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider12.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider13.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider14.jpg" alt="" />
					<img class="owl-lazy" data-src="img/slider/slider15.jpg" alt="" />
				</div>
			</div>

Но теперь нужно добавить ещё 1 слайдер:

<div class="owl-carousel">
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
					<div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
					</div>
				</div>

Подключаю:
$('.owl-carousel2').owlCarousel();

И происходит какая-то чехарда. Смотрю в консоли, все классы навеселись, элементы ужались, но самой карусели нет(код из консоли):

<div class="owl-carousel2 owl-loaded owl-drag">
					<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 2394px;"><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item active" style="width: 342px;"><div class="video-catalog__item">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div><div class="owl-item" style="width: 342px;"><div class="video-catalog__item ">
						<iframe src="https://www.youtube.com/embed/3SpG7C4vHZQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
					</div></div></div></div><div class="owl-nav disabled"><div class="owl-prev">prev</div><div class="owl-next">next</div></div><div class="owl-dots"><div class="owl-dot active"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div></div></div>

При этом если у обоих слайдеров указать класс .owl-carousel, то всё ок, но 2 слайдер мне тоже нужно настроить. С чем проблема? Всё уже проверил, и так и сяк ставил, в консоли нет никаких ошибок. Уже мозг плавится, помогите!!!

Comments

[Сергей delphinpro]

класс .owl-carousel обязателен, цепляйте плагин по дополнительным классам. car1 и car2 например

[Сергей delphinpro]

и с кнопками у вас неверно.. ну когда заработает, вероятно увидите сами.

Answer 1

[Дмитрий Гормаш]

У каждого слайдера должен быть общий класс .owl-carousel.

let owl = $('.owl-carousel');

В js слайдер вызывается не по классу .owl-carousel, а по собственному классу, типа .slider1.

Пример: