3.5.5.1. Incluir jQuery OwlCarousel en las Vistas de Drupal

En el artículo anterior, hicimos un slideshow usando Views Slideshow. Pero todavía tenemos un paginador sin estilo con imágenes pequeñas.

En este artículo, veremos cómo añadir OwlCarousel y añadir CSS usando una biblioteca adicional.

En este ejemplo, usamos un módulo personalizado para conectar OwlCarousel, pero la próxima vez estilizaremos el slideshow en los archivos del tema.

https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip

Puedes leer cómo crear un slideshow en el artículo anterior:

3.5.5. Views slideshow - Mostrar slideshows y carruseles jQuery mediante Views.

Como resultado de añadir un módulo personalizado, obtenemos el siguiente slideshow:

Primero hay que crear la carpeta de nuestro módulo en la carpeta de todos los módulos:

/modules/custom

Luego, crear un archivo de información del módulo

/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml

Para Drupal 8.8 y anteriores:

name: Drupalbook OwlCarousel
description: Añade estilos al paginador de Views
type: module
core: 8.x
package: Drupalbook

Para Drupal 8.8+

name: Drupalbook OwlCarousel
description: Añade estilos al paginador de Views
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook

Más adelante hablaremos del desarrollo de módulos en Drupal; por ahora solo veremos cómo añadir una biblioteca a un módulo personalizado.

name - Nombre arbitrario del módulo

description - Descripción del módulo

type - El tipo, module o theme

core - Para qué versión de Drupal

package - Grupo funcional de módulos

Ahora podemos activar el módulo. Pero primero, añadimos la librería OwlCarousel:

https://owlcarousel2.github.io/OwlCarousel2/

Ubicación: \modules\custom\drupalbook_owlcarousel\js\owlcarousel

Archivo JS adicional: \modules\custom\drupalbook_owlcarousel\js\drupalbook_owlcarousel.js

(function ($) {
  Drupal.behaviors.drupalBookOwlCarousel = {
    attach: function (context, settings) {
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').owlCarousel({
        items: 5,
        margin: 5,
        nav: true,
        responsiveClass: true,
        responsive: {
          0: { items: 3 },
          600: { items: 4 },
          1000: { items: 5 }
        }
      });
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').addClass('owl-carousel');
    }
  };
})(jQuery);

También incluimos un archivo CSS adicional: \modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css

Luego creamos la biblioteca:

Archivo: modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.libraries.yml

drupalbook_owlcarousel:
  css:
    theme:
      js/owlcarousel/assets/owl.carousel.css: {}
      js/owlcarousel/assets/owl.theme.default.min.css: {}
      css/drupalbook_owlcarousel.css: {}
  js:
    js/owlcarousel/owl.carousel.min.js: {}
    js/drupalbook_owlcarousel.js: {}
  dependencies:
    - core/jquery

Finalmente, activamos la biblioteca en nuestro módulo:

Archivo: modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module

/**
 * hook_preprocess_views_view().
 */
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
  if ($variables['view']->storage->id() == 'slideshow') {
    $variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
  }
}

Ahora limpiamos la caché, y los estilos y JS deberían aplicarse. Si los nombres de selectores son diferentes, deberás ajustar los archivos CSS/JS. Si tienes problemas, coméntalo para poder ayudarte.