3.5.5.1. Include jQuery OwlCarousel to Drupal Views
In the last article, we made a slideshow using Views Slideshow. But we still have an unstylized paginator with small pictures.
In this article, we will look at how to add OwlCarousel and add CSS using an additional library.
In this article, we use a custom module to connect OwlCarousel, but next time we will stylize the slideshow in the files of the theme.
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
You can read how to create a slideshow in a previous article:
3.5.5. Views slideshow - Output jQuery slideshows and carousels through Views.
As a result of adding a custom module, we get the following slideshow:
First you need to create the folder of our module in the folder of all modules:
/modules/custom
Next, create a module information file
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
For Drupal 8.8 and below:
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook
For Drupal 8.8+
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook
We will discuss more about the development of modules on Drupal later; now we will simply analyze how to add a library to a custom module.
name - An arbitrary name for our module
description - an arbitrary description of our module
type - here we indicate the type of module / theme depending on what we are creating the theme or module
core - indicate for which version of the drupal module
package - group functionality modules
Now we can turn on our module. But first, let's add the OwlCarousel library, the jQuery OwlCarousel plugin site:
https://owlcarousel2.github.io/OwlCarousel2/
I put the OwlCarousel library here:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
I also added a custom javascript file in which we will initialize the OwlCarousel library
\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);
OwlCarousel connects to a common tag that wraps our individual images. I also added the owl-carousel class for this general div, it is necessary to apply the standard OwlCarousel styles. Also note that in the additional array of responsive options, we can specify separately a different number of elements on the slide for each of the screen resolutions from 0 to 600 pixels 3 elements, from 600 to 1000 pixels 4 elements, from 1000 pixels and above 5 elements. Image sizes will automatically be changed by the OwlCarousel plugin itself.
I also included an additional CSS file, we will write styles for the slideshow in it.
\modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css
.view-slideshow #widget_pager_bottom_slideshow-block_1 {
max-width: 480px;
position: relative;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev {
position: absolute;
left: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-left.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev:hover {
opacity: 1;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next {
position: absolute;
right: 5px;
top: 30px;
opacity: 0.7;
background: url(../images/little-right.png) center center no-repeat;
width: 32px;
padding-top: 32px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next:hover {
opacity: 1;
}
.view-slideshow .views-slideshow-controls-bottom {
max-width: 480px;
}
.views_slideshow_pager_field_item.active img {
border: 1px solid #0000ff;
}
.views_slideshow_controls_text_pause {
display: none;
}
.view-slideshow .view-content {
position: relative;
max-width: 480px;
}
#views_slideshow_controls_text_previous_slideshow-block_1 {
position: absolute;
top: 155px;
left: 10px;
z-index: 99;
}
#views_slideshow_controls_text_previous_slideshow-block_1 a {
background: url(../images/left.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
#views_slideshow_controls_text_next_slideshow-block_1 {
position: absolute;
top: 155px;
right: 10px;
z-index: 99;
}
#views_slideshow_controls_text_next_slideshow-block_1 a {
background: url(../images/right.png) center center no-repeat;
width: 42px;
padding-top: 42px;
height: 0;
overflow: hidden;
display: block;
text-decoration: none;
border: 0;
}
And now we need to connect all this as a Drupal library:
Creating libraries for Drupal:
For this, I created a file 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
In dependencies, you need to specify jQuery, in case this is the only library that requires jQuery. We also need to include the OwlCarousel CSS/JS libraries: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js
We connect our CSS/JS drupalbook_owlcarousel.css, drupalbook_owlcarousel.js after the OwlCarousel files so that you can use the library in javascript and redefine if you need CSS styles.
Now for our library to connect, you need to enable the drupalbook_owlcarousel module. And also add another file with the library connection:
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';
}
}
We specify the name view in if, and in the name of the library we first indicate the name of the module where the drupalbook_owlcarousel library is located, and then through the slash specify the name of the library from the drupalbook_owlcarousel.libraries.yml file. For convenience, I named the library as well as our module, but in one module there can be several libraries and the library name does not always coincide with the name of the module.
Now we clean the cache and our styles and javascript should apply. Perhaps you have different names for the selectors and you will need to change the CSS / JS files. If something doesn’t work out for you then write in the comments, we will sort it out.