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.