6.9 Theming Views Drupal. Create an owl carousel slideshow with thumbnails.

Very often, the Views template does not suit us, so we can override the templates for Views. Unfortunately, there is no UI to search for the desired template in Views, but we can use patterns to redefine templates.

More about patterns in this article:

6.6. Working with templates in Drupal. What are the templates in the core of Drupal.

In particular, we are interested in this:

Below are the possible template names to override.

View Name - foobar (machine name)
Display format - unformatted (unformatted list, add possible options)
Display Style - fields
Display Name — page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

The Owl Carousel 1.x plugin does not have the ability to display thumbnails to the gallery. Therefore, we will use Owl Carousel version 2.x, there is support for thumbnails. If you do not want to understand redefinition of templates, writing CSS, Javascript code, then you can simply install the Views Slideshow module:

https://www.drupal.org/project/views_slideshow

Or the Flex Slider module:

https://www.drupal.org/project/flexslider

You can quickly configure slideshows on them without knowledge of CSS, jQuery.

We will practice redefining Views templates and connecting jQuery libraries.

To get started, download and include the Owl Carousel 2.x library:

https://github.com/OwlCarousel2/OwlCarousel2

Perhaps you have found Owl Carousel 1.x:

https://github.com/OwlFonk/OwlCarousel

It will not suit us, it does not support thumbnails, for it you need to write additional code.

Copy the owl-carousel folder (where the owl.carousel.min.js file is located) to the folder with our theme, now let's include the css and js carousel files. We add the following lines to the theme .libraries.yml file:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

I did not move js files in the / js, css folder to the / css folder, but you can do it, then remember to correct the paths in the css files to the pictures that I think you put in the images folder.

To apply the changes you need to clean the cache.

Now let's create a gallery content type and add an image field to it.

Create a new view, where we display one field image from a new content type.