Как исправить такое поведение Owl-Carousel 2?

Question

[Егор Бадулин]

Размер слайдера ограничен (по задумке) размерами блока .point-info , но выводится все одной вертикальной простыней. Причем, весь столбик двигается, как один слайд.

<div class="point-info">
  <h2>Маршрут <br> нашей поездки</h2>
  <div class="owl-carousel-map">
    <div class="point-block">
      <img src="img/card1.png" alt="Долина Монументов" class="point-info-img">
      <div class="point-info-text">
        <p class="point-info-title"><span class="info-bold">Долина Монументов,</span> Аризона</p>
        <p>7й день нашего путешествия</p>
      </div>
    </div>
    <div class="point-block">
      <img src="img/card1.png" alt="Долина Монументов" class="point-info-img">
      <div class="point-info-text">
        <p class="point-info-title"><span class="info-bold">Долина Монументов,</span> Аризона</p>
        <p>7й день нашего путешествия</p>
      </div>
    </div>
  </div>
</div>

.point-info {
  width: 386px;
  float: right;
  box-sizing: border-box;
  margin-right: 15%;
  margin-top: 20%;
}

$('.owl-carousel-map').owlCarousel({
  items:1,
  dots: true,
  loop:false,
  center:true,
  dotsContainer: '.map-only'
});

Этот слайдер нормально работает в других блоках сайта, поэтому другой подключать не хочу. Классы и стили от предыдущих никак не влияют, проверял.

Comments

[Mary Солнечная]

посмотрите, может быть </div> лишний стоит, но я могу ошибаться

[Mary Солнечная]

Если вдруг нет - попробуйте действовать от обратного - путем отключения/включения параметров карусельки, может сработает :)

Answer 1

[Артур Карапетян]

У карусели ОБЯЗАТЕЛЬНО должен быть класс owl-carousel просто сделайте вместо<div class="owl-carousel-map"> это <div class="owl-carousel carousel-map">

Comments

[Артур Карапетян]

И в JS $('.carousel-map').owlCarousel();

[Егор Бадулин]

Вот, оно. Вы мне очень помогли, спасибо!