Streaming live at 10am (PST)

Owl Carousel does not work. Why?


#1

Don’t understand there were no problems when installing the carousel… But now is: http://test-owl.webflow.io/

Here HEAD code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

Here Before BODY:
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>$('.owl').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:2
        }
    }
})</script>

Project Link:
https://preview.webflow.com/preview/test-owl?utm_source=test-owl&preview=036e930a1a4a5962d4b42b0b0acbfae2

Why carousel may not work?


#2

Missing owl-carousel class

You should add owl-carousel class for the container.

All you need is to wrap your divs(owl works with any type element a/img/span…) inside the container element <div class="owl-carousel"> . Class “owl-carousel” is mandatory. Read More (OWL DOCS)

image

<!-- Set up your HTML -->
<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

#3

@Siton_Systems apparently the problem is not that, now exactly repeats the structure from here: https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html

The result is the same:
http://test-owl.webflow.io/


#4

OK. Mistake 2 :slight_smile:

You wrap your CSS assets with style (Wrong):

<style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</style>

Correct:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

#5

Oh my… was stupid…)) Thanks man!:v::blush:


#6

Great! :slight_smile: In general - when something doesn’t work the best way is to: open new ==> codepen copy-paste your custom code and debug (It’s harder to debug custom code on webflow).

Please mark as solution to close this topic. Thanks