M
M
Maxim Gerasimenko2020-05-11 13:13:26
css
Maxim Gerasimenko, 2020-05-11 13:13:26

Why doesn't Owl Carusel work on the site?

Good day to all!
There is such a site . There are reviews on this site on the Home page at the bottom. You need to connect Owl Carusel to them. It seems to have done everything, but the carousel does not work. There are no errors in the console. There are two more Owl Carusels on the website on the Main page - this is the Featured collection block and the BUY IT NOW block. They work fine.
Please tell me why Owl Carusel does not work on reviews?

<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
      }
    }
})

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dubolom Unicellular, 2020-05-11
@duboloms

Try to include css styles owl carousel.
--After going to the page there are buttons: js, css, image, you need css, click on this button and there will be links that you will need to connect in the header to your site--
Connect via the link tag:

<link src="та ссылка которую ты скопировал с cdnjs.com" />

Changed:
This is most likely due to the fact that you have the otzyv block wrapped in another div without a class. Just remove that extra wrapping block from each comment
Changed 2:
Put all containers plus an extra wrapper. Those. for all elements, make ONE wrapper: https://owlcarousel2.github.io/OwlCarousel2/docs/a...

L
Lord_Dantes, 2020-05-11
@Lord_Dantes

Add class="owl-carousel" to #otzyv_wrapper
UPD https://codepen.io/lord-dantes/pen/mdeKdKB

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question