Multiple OwlCarousel init based on data attributes

Recently ran into a problem where I used OwlCarousel 2 (Best and most flexible slider I ever used) on a website, but different pages needed different carousels. For example on one of the pages with Navigation & Pagination, but on an other without Nav & Pagination BUT with autoplay.

I thought its gonna be easy, make different carousels driven by HTML markup’s data-attributes! Yesss.. Easy enough! BUT enlightment came, at the moment OwlCarousel doesn’t support data-attributes by now.

First puritan solution I came with is create multiple and different Javascript .owlcarousel initialisations with different options. This works but LOT OF UNNECESSARY CODE DUPLICATIONS!!! That means BAD solution. After all I came up with the below solution:

 

 

This is basically initialising .owlCarousel but it is listening to HTML data-attributes in the Markup! Cool! That means from now on you can init Sliders with options added to your HTML markup for example :

 

Share it