Owl carousel in webflow. possible?

[ronn (ron)]

Has anyone implemented owl carousel in webflow ? Is it possible ? Would really like some help. Thanks

[vincent (Vincent Bidaux)]

have you tried? Implementing is quite easy.

Get the CSS and js file from their page and host them somewhere (dropbox for example) and write down direct links to them.

Add that custom code in the HEAD section:

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Default Theme -->
<link rel="stylesheet" href="HERE THE DIRECT LINK TO owl.theme.css">
 
<!--  jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Include js plugin -->
<script src="HERE THE DIRECT LINK TO owl.carousel.js"></script>

Then that custom code in the “before /body” section:

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

Then build a div structure in Webflow and be sure to give the parent div the class “.owl-carousel” so in the end the HTML code looks like this:

<div id="owl-example" 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>