Есть новостной слайдер скомпонованный из двух взаимодействующих
owl-carousel, который работает по переключению как стрелок, так и по названиям пунктов меню в правом блоке.
Есть 2 бага: 1 - не инициализируется первоначальное состояние пункта меню, бьет ошибку в функции
carouselInitialized
Uncaught TypeError: el.find is not a function
Делал по принципу
первой версии, но там в callback функции afterInit все работало исправно..
2 - в какой-то момент переключений слайдов возникает аналогичная ошибка и слайды с пунктами меню в итоге сбиваются.
Как это исправить?
Сам код
фидл
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
items: 1,
loop: true,
singleItem: true,
pagination: false,
onChanged: syncPosition,
responsiveRefreshRate: 200,
nav: true,
navText: ["<i class='fa fa-chevron-left' aria-hidden='true'></i>", "<i class='fa fa-chevron-right' aria-hidden='true'></i>"],
animateOut: "fadeOut"
});
sync2.owlCarousel({
items: 4,
pagination: false,
responsiveRefreshRate: 100,
//afterInit : carouselInitialized
onDragged: carouselInitialized
//onInitialized: carouselInitialized
});
function carouselInitialized(el) {
el.find(".owl-item").eq(0).addClass("synced");
}
function syncPosition(el) {
var current = el.relatedTarget.current() - 1;
$("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced");
}
$("#sync2").on("click", ".owl-item", function(e) {
e.preventDefault();
var i = $(this).index() - 5;
sync1.trigger('to.owl.carousel', i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" />
<div class="owl-carousel-wrapper">
<div id="sync1-wrapper">
<div id="sync1" class="owl-carousel">
<div class="item">
<img src="https://i0.wp.com/bookmaker-ratings.com.ua/ru/wp-content/uploads/2019/09/FK-Atalanta.jpg" alt="">
<div class="desc">Футбольный комментатор «Матч ТВ», спортивный журналист, главный инсайдер российского футбола и эксперт «Рейтинга Букмекеров»…</div>
</div>
<div class="item">
<img src="https://i2.wp.com/bookmaker-ratings.com.ua/ru/wp-content/uploads/2019/10/2-222.jpg" alt="">
<div class="desc">Футбольный журналист, эксперт «Рейтинга Букмекеров» Артур Петросьян составил экспресс из ставок на матчи 3-го тура…</div>
</div>
<div class="item">
<img src="https://i1.wp.com/bookmaker-ratings.com.ua/ru/wp-content/uploads/2019/08/Liga-CHempionov2-2.jpg" alt="">
<div class="desc">«Рейтинг Букмекеров» подготовил для вас пять самых интересных событий для ставок на спорт в период с 21 по 27 октября. Лига…</div>
</div>
<div class="item">
<img src="https://i2.wp.com/bookmaker-ratings.com.ua/ru/wp-content/uploads/2019/09/rb-lejptsig-verner-e1569586830809.jpg" alt="">
<div class="desc">Бывший полузащитник московского «Спартака», футбольный эксперт «Рейтинга Букмекеров» и БК «Лига Ставок» Евгений Ловчев дал…</div>
</div>
</div>
</div><div id="sync2-wrapper">
<div id="sync2" class="owl-carousel">
<div class="item">Назван фаворит матча “Лион” - “Зенит” в первом туре Лиги</div>
<div class="item">«William Hill» и другие британские букмекеры несут грандиозные убытки</div>
<div class="item">Открыт прием ставок на тур, в котором сборная России выйдет на Евро-2020</div>
<div class="item">«Бетсити» стал официальным букмекером «Монако» в России</div>
</div>
</div>
</div>
.owl-carousel-wrapper {
padding: 12px 12px 0;
background: #FFFFFF;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.24), 0px 0px 4px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
#sync1-wrapper,
#sync2-wrapper {
display: inline-block;
vertical-align: top;
width: 50%;
}
#sync1 .item {
color: #000000;
text-align: center;
}
#sync1 .item>img {
max-width: 100%;
height: auto;
}
#sync2 .owl-wrapper {
width: 100%;
}
#sync2 .owl-item {
width: 100% !important;
float: none;
}
#sync2 .item {
padding: 10px 0;
color: #000000;
text-align: center;
cursor: pointer;
border-left: 7px solid transparent;
font-style: normal;
font-weight: bold;
font-size: 12px;
}
#sync2 .synced .item {
background: #F5F5F5;
border-radius: 0px 5px 0px 0px;
border-color: #0c88e7;
color: #0596D5;
}
