Joomla Custom module With Owl carousel

Question

I need some advice on how to implement an OWL carousel with Joomla! native custom module. I have done some research already and I have tried several options including the add of the owl files to the media/jui folder, but for now the result is null.

The html part is a simple code

1

 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

Answer 1

What do you exactly mean with "Joomla! native custom module"? Joomla's Custom HTML module?

The OWL carousel I found on github uses some JavaScript(JS) + CSS, and some HTML tags with classes that you could put in your Joomla custom HTML module:

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
</div>

The JS + CSS have to be loaded on the pages where you display the Joomla Custom Module. To load JS or CSS, you could use Joomla's

• Factory::getDocument like described here: https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
• or use Joomla's HTMLHelper: How to use HTMLHelper to add to the document head

For instance, you could load the JS + CSS via your front-end template. However it will be loaded on all other pages as well and might have a (small) negative impact on the performance of your website.