Почему не работает Owl Carusel на сайте?

Всем доброго времени суток!
Есть такой сайт. На этом сайте на Главной странице внизу есть отзывы. Нужно к ним подключить Owl Carusel. Вроде бы все сделал, но карусель не работает. В консоли ошибок нет. На сайте на Главной странице есть еще две карусели Owl Carusel - это блок Featured collection и блок BUY IT NOW. Они работают нормально.
Подскажите пожалуйста почему не работает Owl Carusel именно на отзывах?
<div id="otzyv_wrapper">
    <div><div class="otzyv">
      <p class="rev_author">Tomas</p>
      <img class="star" src="https://cdn.shopify.com/s/files/1/0274/7239/6352/t/2/assets/5-stars.png" alt="star" />
      <p class="rev_text">Before I could take my hands off the keyboard after sending the request, I was already called back from the store and offered help. I chose a smartphone among Xiaomi models and the consultant lucidly explained the advantages of each phone. And having ordered accessories for it, I received a 10% discount on them. I bought it in Technobit for the first time, the site was made in good faith, nothing superfluous, all the information is only on business.</p>
    <div class="rev_date">
               <i class="fa fa-clock-o"></i> 12/02/2020 
    </div>
      </div></div>
          <div><div class="otzyv">
      <p class="rev_author">James</p>
      <img class="star" src="https://cdn.shopify.com/s/files/1/0274/7239/6352/t/2/assets/5-stars.png" alt="star" />
      <p class="rev_text">I had to buy a printer. On the comparison site, the price was the lowest in this particular store. I left a request for a call back to clarify some details. We called back quickly through this call and place an order. They said that it is not available, you need to order. And the money has already been transferred.A week later they called back, they said what would happen after the new year. But the next day they called again, and said that they had sent.</p>
    <div class="rev_date">
               <i class="fa fa-clock-o"></i> 29/02/2020 
    </div>
      </div></div>
                <div><div class="otzyv">
      <p class="rev_author">Juan</p>
      <img class="star" src="https://cdn.shopify.com/s/files/1/0274/7239/6352/t/2/assets/5-stars.png" alt="star" />
      <p class="rev_text">Good store. Together with the phone, they gave me 3 starter packs as a “gift”, which I had been lying with for a couple of weeks, and when I unpacked one of them, it turned out that the SIM card in it was with another number and in general it had already expired. For the rest of the packages, SIM cards were also already used. I don’t seem to mind, because I didn’t need them. But the situation itself is not very pleasant. It's not nice to do that. Otherwise</p>
    <div class="rev_date">
               <i class="fa fa-clock-o"></i> 15/03/2020 
    </div>
                  </div></div></div>


$('#otzyv_wrapper').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
      0:{
        items:1
      },
      600:{
        items:2
      },
      1000:{
        items:3
      }
    }
})
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 2
duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.
Попробуй подключить css стили owl carousel.

--После перехода на страницу там есть кнопки: js, css, image, тебе нужно css, нажми на эту кнопу и там будут ссылки которые ты должен будешь подключить в шапке к твоему сайту--

Подключишь через тег link:
<link src="та ссылка которую ты скопировал с cdnjs.com" />


Изменено:
Скорее всего это из-за того, что у тебя блок otzyv обернут в еще один div без класса. Просто убери этот лишний оберточный блок у каждого комментария

Изменено 2:
Помести все контейнеры еще плюс в дополнительную обертку. Т.е. для всех элементов, сделать ОДНУ обертку: https://owlcarousel2.github.io/OwlCarousel2/docs/a...
Ответ написан
@Lord_Dantes
Добавить class="owl-carousel" к #otzyv_wrapper

UPD https://codepen.io/lord-dantes/pen/mdeKdKB
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы