3.5.5.1. Einbinden von jQuery OwlCarousel in Drupal Views
Im letzten Artikel haben wir eine Diashow mit Views Slideshow erstellt. Aber der Paginator mit kleinen Bildern ist noch ungestylt.
In diesem Artikel sehen wir, wie man OwlCarousel hinzufügt und mit einer zusätzlichen Bibliothek CSS einbindet.
Wir verwenden hier ein eigenes Modul, um OwlCarousel einzubinden. Beim nächsten Mal stylen wir die Diashow direkt in den Theme-Dateien.
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
Wie man eine Diashow erstellt, steht im vorherigen Artikel:
3.5.5. Views Slideshow – jQuery-Diashows und Karussells durch Views ausgeben.
Das Ergebnis mit dem benutzerdefinierten Modul ist folgende Diashow:
Zuerst erstellen wir den Modul-Ordner im Ordner für benutzerdefinierte Module:
/modules/custom
Dann erstellen wir die Modul-Info-Datei:
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
Für Drupal 8.8 und niedriger:
name: Drupalbook OwlCarousel
description: Fügt Styles für den Views-Paginator hinzu
type: module
core: 8.x
package: Drupalbook
Für Drupal 8.8 und höher:
name: Drupalbook OwlCarousel
description: Fügt Styles für den Views-Paginator hinzu
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook
Mehr zur Modulentwicklung folgt später, jetzt analysieren wir nur, wie man eine Bibliothek in ein eigenes Modul einbindet.
name – beliebiger Modulname
description – beliebige Beschreibung
type – Typ, Modul oder Theme
core / core_version_requirement – Drupal-Version
package – Gruppierung im Backend
Jetzt aktivieren wir unser Modul. Zuerst fügen wir die OwlCarousel Bibliothek hinzu:
https://owlcarousel2.github.io/OwlCarousel2/
Ich habe die OwlCarousel-Bibliothek hier abgelegt:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
Zusätzlich eine eigene JavaScript-Datei, in der wir OwlCarousel initialisieren:
\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 wird auf das Element mit allen Bildern angewandt. Die Klasse owl-carousel muss dem Haupt-Div hinzugefügt werden, damit die Standard-Styles greifen.
Im Array responsive definieren wir die Anzahl der Elemente je nach Bildschirmgröße: 3 Elemente bis 600px, 4 bis 1000px, 5 ab 1000px Breite. Die Bildgrößen werden automatisch angepasst.
Zusätzlich habe ich eine CSS-Datei mit Styles für die Diashow angelegt:
\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;
}
Nun binden wir all das als Drupal-Bibliothek ein.
Bibliothek erstellen:
Die Datei 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
Die Abhängigkeit von jQuery ist wichtig, da OwlCarousel darauf basiert.
Nun aktivieren wir das Modul drupalbook_owlcarousel und binden die Bibliothek an Views.
In der Datei modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module:
/**
* Implementierung von hook_preprocess_views_view().
*/
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
if ($variables['view']->storage->id() == 'slideshow') {
$variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
}
}
Hier prüfen wir, ob die View mit der ID "slideshow" angezeigt wird und binden dann die OwlCarousel-Bibliothek ein.
Cache leeren, und die Styles und Skripte sollten wirksam sein.
Je nach Verwendung der Klassen und Selektoren in Ihrem Theme müssen Sie eventuell CSS und JS anpassen.
Falls Probleme auftreten, schreiben Sie gerne einen Kommentar, wir helfen weiter.