@Tutucu

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

Здравствуйте, на сайте есть слайдер 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 слайдер мне тоже нужно настроить. С чем проблема? Всё уже проверил, и так и сяк ставил, в консоли нет никаких ошибок. Уже мозг плавится, помогите!!!
  • Вопрос задан
  • 247 просмотров
Пригласить эксперта
Ответы на вопрос 1
У каждого слайдера должен быть общий класс .owl-carousel.
let owl = $('.owl-carousel');

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

Пример:
denKnYo.png
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы