Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Не инициализируется первоначальное состояние owl carousel - ошибка TypeError: el.find (https://javascript.ru/forum/library-toolkit-framework/78718-ne-inicializiruetsya-pervonachalnoe-sostoyanie-owl-carousel-oshibka-typeerror-el-find.html)

giwuf 25.10.2019 08:13
[Решено] Не инициализируется первоначальное состояние owl carousel - ошибка TypeError
 
Есть новостной слайдер скомпонованный из двух взаимодействующих 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;
}

рони 25.10.2019 15:07
OwlCarousel2 своя навигация по «точкам»
 
giwuf,
классы изменены, строка 52, 90. 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .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  .item.active {
  background: #F5F5F5;
  border-radius: 0px 5px 0px 0px;
  border-color: #0c88e7;
  color: #0596D5;
}

  </style>

</head>

<body>
<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="">
      <div class="item">Назван фаворит матча “Лион” - “Зенит” в первом туре Лиги</div>
      <div class="item">«William Hill» и другие британские букмекеры несут грандиозные убытки</div>
      <div class="item">Открыт прием ставок на тур, в котором сборная России выйдет на Евро-2020</div>
      <div class="item">«Бетсити» стал официальным букмекером «Монако» в России</div>
    </div>
  </div>
</div>
<script>
$(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
sync1.owlCarousel({
  items: 1,
  loop: true,
  singleItem: true,
  pagination: false,
  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",
  dotsContainer : "#sync2"
});
sync2.on("click", ".item", function(e) {
  e.preventDefault();
  var i = $(this).index();
  sync1.trigger('to.owl.carousel', i);
});

});
  </script>
</body>
</html>

giwuf 27.10.2019 13:11
Цитата:
Сообщение от рони
OwlCarousel2 своя навигация по «точкам»
Понял, вас, рони. Спасибо большое за помощь!


Часовой пояс GMT +3, время: 23:46.