Здравствуйте, на сайте есть слайдер 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 слайдер мне тоже нужно настроить. С чем проблема? Всё уже проверил, и так и сяк ставил, в консоли нет никаких ошибок. Уже мозг плавится, помогите!!!
Простой
Простой
