how can i use owl carousel with symfony 4?

Question

I'm working on a symfony project and i need include an owl carousel on it. I have add owl carousel with this command "yarn add owl.carousel jquery" and i see owl carousel plugin in the node_modules folder but now i don't know how i can use it. Could you help me please ?

I'm using webpack encore for compact all javascript and CSS files.

if you want te see, how owl carousel work go on this : https://owlcarousel2.github.io/OwlCarousel2/

Answer 1

So be sure to include the javascript and css of your Owl carrousel plugin in your page

(And you need Jquery for it)

<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />

Then do your carrousel :

<div class="owl-carousel owl-theme">
  <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>

And then call the plugin with javascript :

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});