Creación de un módulo OwlCarousel

La existencia de variedad de carruseles y sliders en forma de módulos y librerías, resulta en infinidad de variaciones para la creación de los mismos. Hoy os vamos a explicar cómo crear un módulo personalizado muy sencillo que utilice las librerías de OwlCarousel (versión 2).

Lo primero que tenemos que hacer es descargarlo de la web oficial. Una vez conseguido, partiremos para este ejemplo con las hojas de estilos y javascript básicas y minificadas. Para mantenerlas apartadas de nuestro código, este es un ejemplo de los directorios de la base del módulo donde los pondremos:

base/css/owl.carousel.css
base/css/owl.theme.default.min.css
base/js/owl.carousel.min.js

OwlCarousel necesita jQuery, si vuestro tema no lo integra debéis añadir la librería, así como crearemos los necesarios .info.yml y un .libraries.yml donde señalaremos estos ficheros y los nuestros, por ejemplo:

modulo:
  css:
    theme:
      base/css/owl.carousel.css: {}
      base/css/owl.theme.default.min.css: {}
      css/mi.css: {}
  js:
    js/mi_identificador.js: {}
    base/js/owl.carousel.min.js: {}
    js/mi.js: {}
  dependencies:
    - core/jquery

Los archivos "mi" son nuestro código personalizado. Pero antes de nada, debemos adjuntar nuestras librerías a los elementos del sitio donde vayamos a utilizar el carrusel. Por ejemplo, para una vista:

function modulo_preprocess_views_view(&$variables) {
  $viewsArray = [
    'id_vista'
  ];
  if (in_array($variables['view']->storage->id(), $viewsArray)) {
    $variables['#attached']['library'][] = 'modulo/modulo';
  }
}

OwlCarousel modifica el HTML existente con una serie de clases en cascada sobre las que su código trabaja, por lo que en mi_identificador tendremos un array señalando al bloque HTML que contiene los elementos de nuestro carrusel para que sepa dónde están:

(function($) {
    $(document).ready(function() {
       var owlCarousels = [
           '#padre-items'
        ];
       $.each(owlCarousels, function(i, val){
        $(val).addClass('owl-carousel');
       })
    });   
})(jQuery, Drupal);

Finalmente, configuraremos este owlcarousel en "mi.js". Podemos ver las distintas configuraciones disponibles en la web oficial y basarnos en sus demostraciones:

(function($) {
    $(document).ready(function() {
        $("#padre-items").owlCarousel({
            autoplay: true,
            autoplayTimeout: 3000,
            loop: true,
            nav: false,
            items: 1,
        });
    });   
})(jQuery, Drupal);

Esta configuración hará que el carousel rote automáticamente cada 3000 milisegundos, que al terminar la lista de elementos vuelva a empezar por el primero, que no se muestren elementos de navegación, y que sólo se muestren los elementos de uno en uno.

Creación de un módulo OwlCarousel

Nuestras temáticas