Opzioni di Owl Carousel 2 tramite data-attribute

Sviluppando capita spesso di dover velocizzare i processi. Uno dei più noiosi per me è sempre stato quello di creare nuovi attivatori per i template jQuery quindi, da un pò di tempo a questa parte sto cercando di configurare le opzioni dei plugin tramite data-attribute in HTML. Questo mi permette di velocizzare la personalizzazione del plugin senza più toccare l’attivatore e andando a configurarlo direttamente sul blocco HTML.

Recentemente uno degli elementi che ha più velocizzato i miei processi è stato quello di poter configurare le opzioni di Owl Carousel 2 tramite data-attribute in HTML. Come?

Con il codice qui sotto:

    if ( jQuery('.owl-carousel').length ) {
        jQuery.each( jQuery('.owl-carousel'), function(){
            owlOptions = [];
            if ( typeof jQuery(".owl-carousel").data('items') !== 'undefined' ) owlOptions['items'] = jQuery(".owl-carousel").data('items');
            if ( typeof jQuery(".owl-carousel").data('loop') !== 'undefined' ) owlOptions['loop'] = jQuery(".owl-carousel").data('loop');
            if ( typeof jQuery(".owl-carousel").data('margin') !== 'undefined' ) owlOptions['margin'] = jQuery(".owl-carousel").data('margin');
            if ( typeof jQuery(".owl-carousel").data('nav') !== 'undefined' ) owlOptions['nav'] = jQuery(".owl-carousel").data('nav');
            if ( typeof jQuery(".owl-carousel").data('dots') !== 'undefined' ) owlOptions['dots'] = jQuery(".owl-carousel").data('dots');
            if ( typeof jQuery(".owl-carousel").data('autoplay') !== 'undefined' ) owlOptions['autoplay'] = jQuery(".owl-carousel").data('autoplay');
            if ( typeof jQuery(".owl-carousel").data('autoplay-timeout') !== 'undefined' ) owlOptions['owlAutoplayTimeout'] = jQuery(".owl-carousel").data('autoplay-timeout');

            var $carousel = jQuery(this);
            $carousel.owlCarousel(owlOptions);
        });
    }

Una volta utilizzato questo attivatore potrete personalizzare sul blocco HTML i data-attribute:

items
loop
margin
nav
dots
autoplay
autoplayTimeout

Se volete aggiungere nuovi data-attribute potete farlo direttamente dal repository che ho creato su GitHub.

Hai ancora bisogno di aiuto?

Puoi scrivere qui sotto nei commenti oppure contattarmi direttamente per una consulenza!
Per farlo utilizza la pagina Contatti.