▼
Streaming live at 10am (PST)

Owl Carousel Integration Problem

#1

Hello,

I am trying to integrate Owl Carousel into my page. Unfortunately, for some reason it’s not working. I followed the guide here: https://forum.webflow.com/t/owl-carousel-in-webflow-possible/32905

It’s just giving some errors.

I should mention I am a very beginner with JS and JQuery.

Thanks for all the help in advance.

Site Link (Go to “OWL CAROUSEL” page): https://preview.webflow.com/preview/gne?preview=2fa09bfb3af9fad33f6e67cd374652b1

#2

Where exactly on your site are you trying to use it?

#3

Also because it’s custom code can you provide the link to published site. Sometimes looking at the errors using inspect can help figure why a script isn’t working

#4

http://gne.webflow.io/collection/marketing-in-2018

Here, at the top. It’s currently a native Webflow slider until I can figure out how to integrate Owl Carousel. The main reason I want to do that is because I want it to be responsive.

#5

There you go.

http://gne.webflow.io/owlcarousel

It looks empty but the console shows some errors.

#6

Seems to be related to the naming, shouldn’t it be owl-carousel ? not owlcarousel I know the original code might of had that typo in it.

image

#7

Tried changing it from:

<script>
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>

to this:

<script>
$(document).ready(function(){
  $(".owl-carousel").owl-carousel();
});
</script>

Still not working: http://gne.webflow.io/owlcarousel

#8

I’m not really sure at this point I went to the owl carousel page and it seems to work very similarily to the other sliders like cycl2js or slick slider which I have paired with CMS successfully. Are you using the latest version of the carousel?

#9

I can verify yes, I am.

I’ve tested it locally and it worked just fine.

I suspect I’m not integrating it with Webflow correctly for some reason. I suspect it might be how I call jQuery? Can you very if all the requirements are in order inside the head tag? Can you spot any problems?

<link rel="stylesheet" href="http://dl.dropbox.com/s/xus8ttz5d0614bw/owl.carousel.min.css">
<link rel="stylesheet" href="http://dl.dropbox.com/s/73m8ht889g5z0mb/owl.theme.default.min.css">
<script src="http://dl.dropbox.com/s/6535qfnly673hy7/jquery-3.3.1.min.js"></script>
<script src="http://dl.dropbox.com/s/7jaoqrmgyrk4scu/owl.carousel.min.js"></script>
#10

One thought and I’m about to build and test my own is the SSL, I know with other .js I have had to make sure it was being from secure host otherwise Webflow wouldn’t integrate, the mixing of the secure and insecure. But webflow.io is not https so I’m not sure that is the issue.

#11

I’m not sure. It may be a more complicated option that is integrated with the slider function in webflow like cycle js. I followed the demo to create a simple slider but it didn’t work. I suggest you check out slick slider which seems to be the simplest to implement.

< link rel=“stylesheet” type=“text/css” href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
< link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css” / >

with the structure
similar to owl carousel with nested divs,
but the main div class is slider

and the script
< script type=“text/javascript” src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">
< script>
$(’.slider’).slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 3,
dots: true
});
< /script>

example on
http://truereflectionmedia-sandbox.webflow.io/ very bottom

or
http://cms-slider-and-cycle2js.webflow.io/ more complex implementation

as explained on the site

#12

Try this bootstrap owl carousel