Показать сообщение отдельно
  #2 (permalink)  
Старый 25.10.2019, 15:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

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>
Ответить с цитированием