Incluir Owl-Carrusel Manual Theme D8

Categoría
Drupal 8

1. Descargar la libreria Owl-Carrusel y copiarla en la carpeta JS de su tema mitheme

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

2. Modificar el archivo mitheme.libraries.yml de la siguiente manera:

global-styling:
  css:
    theme:
      css/style.css: {}
      js/owlcarrusel/assets/owl.carousel.css: {}
      js/owlcarrusel/assets/owl.theme.default.css: {}
    global-scripts:
      js:
       js/owlcarrusel/owl.carousel.js: {}
       js/custom.js: {}

3. Modificar el archivo mitheme.info.yml de la siguiente manera:

libraries:
  - 'mitheme/global-styling'
  - 'mitheme/global-scripts'

Ejemplo de prueba

Crear un bloque custom html con el siguiente código.

<div class="owl-carousel owl-theme"> 
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>
</div>

Incluir en el archivo Js del tema, es este caso custom.js

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
       $('.owl-carousel').owlCarousel({
          rtl:true,
          loop:true,
          margin:10,
          nav:true,
       });
    }
  };
})(jQuery, Drupal);

Saludos