3.5.5.1. Ներառեք jQuery OwlCarousel-ը Drupal Views-ին
Վերջին հոդվածում մենք սլայդ շոու պատրաստեցինք՝ օգտագործելով Views Slideshow: Բայց մենք դեռևս ունենք փոքր նկարներով չոճավորված էջադրող։
Այս հոդվածում մենք կանդրադառնանք, թե ինչպես ավելացնել OwlCarousel և ավելացնել CSS՝ օգտագործելով լրացուցիչ գրադարան:
Այս հոդվածում մենք օգտագործում ենք հատուկ մոդուլ՝ OwlCarousel-ը միացնելու համար, բայց հաջորդ անգամ մենք ոճավորելու ենք սլայդերի ցուցադրումը թեմայի ֆայլերում:
https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip
Ինչպես ստեղծել սլայդշոու, կարող եք կարդալ նախորդ հոդվածում.
3.5.5. Views slideshow - Output jQuery slideshows and carousels through Views.
Պատվերով մոդուլ ավելացնելու արդյունքում մենք ստանում ենք հետևյալ սլայդշոուն.
Նախ անհրաժեշտ է ստեղծել մեր մոդուլի թղթապանակը բոլոր մոդուլների թղթապանակում.
/modules/custom
Հաջորդը, ստեղծեք մոդուլի տեղեկատվական ֆայլ
/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml
Drupal 8.8-ի և ստորև ներկայացվածի համար՝
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook
Drupal 8.8+ ի համար
name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook
Մենք ավելի ուշ կքննարկենք Drupal-ում մոդուլների մշակման մասին; այժմ մենք պարզապես կվերլուծենք, թե ինչպես կարելի է գրադարան ավելացնել մաքսային մոդուլին:
անուն - կամայական անուն մեր մոդուլի համար
նկարագրություն - մեր մոդուլի կամայական նկարագրությունը
տեսակ - այստեղ մենք նշում ենք մոդուլի / թեմայի տեսակը, կախված նրանից, թե ինչ ենք ստեղծում թեման կամ մոդուլը
միջուկ - նշեք, թե drupal մոդուլի որ տարբերակի համար
փաթեթ - խմբային ֆունկցիոնալ մոդուլներ
Այժմ մենք կարող ենք միացնել մեր մոդուլը: Բայց նախ, եկեք ավելացնենք OwlCarousel գրադարանը, jQuery OwlCarousel plugin կայքը:
https://owlcarousel2.github.io/OwlCarousel2/
Ես դրեցի OwlCarousel գրադարանը այստեղ.
\modules\custom\drupalbook_owlcarousel\js\owlcarousel
Ես նաև ավելացրել եմ հատուկ javascript ֆայլ, որում մենք նախաստորագրելու ենք OwlCarousel գրադարանը
\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-ը միանում է ընդհանուր պիտակին, որը փաթաթում է մեր անհատական պատկերները: Այս ընդհանուր div-ի համար ավելացրի նաև owl-carousel դասը, անհրաժեշտ է կիրառել ստանդարտ OwlCarousel ոճերը։ Նաև նկատի ունեցեք, որ արձագանքող ընտրանքների լրացուցիչ զանգվածում մենք կարող ենք առանձին նշել սլայդի վրա տարբեր թվով տարրեր էկրանի լուծաչափերից յուրաքանչյուրի համար՝ 0-ից 600 պիքսել 3 տարր, 600-ից 1000 պիքսել 4 տարր, 1000 պիքսել և ավելի բարձր: 5 տարր. Պատկերի չափերն ինքնաբերաբար կփոխվեն OwlCarousel հավելվածի կողմից:
Ես նաև լրացուցիչ CSS ֆայլ եմ ներառել, մենք դրա մեջ կգրենք սլայդշոուի ոճեր։
\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;
}
Եվ հիմա մենք պետք է միացնենք այս ամենը որպես Drupal գրադարան.
Գրադարանների ստեղծում Drupal-ի համար՝
Սրա համար, ես ստեղծել եմ 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
Կախվածության դեպքում դուք պետք է նշեք jQuery, եթե սա միակ գրադարանն է, որը պահանջում է jQuery: Մենք նաև պետք է ներառենք OwlCarousel CSS/JS գրադարանները՝ owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js:
Մենք միացնում ենք մեր CSS/JS drupalbook_owlcarousel.css-ը, drupalbook_owlcarousel.js-ը OwlCarousel ֆայլերից հետո, որպեսզի կարողանաք օգտագործել գրադարանը javascript-ով և վերասահմանել, եթե ձեզ անհրաժեշտ են CSS ոճեր:
Այժմ, որպեսզի մեր գրադարանը միանա, դուք պետք է միացնեք drupalbook_owlcarousel մոդուլը: Եվ նաև ավելացրեք մեկ այլ ֆայլ գրադարանային կապով.
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';
}
}
Մենք նշում ենք անվան տեսքը if-ում, և գրադարանի անվանման մեջ նախ նշում ենք այն մոդուլի անունը, որտեղ գտնվում է drupalbook_owlcarousel գրադարանը, իսկ հետո կտրվածքի միջոցով նշում ենք գրադարանի անունը drupalbook_owlcarousel.libraries.yml ֆայլից: Հարմարության համար ես անվանեցի գրադարանը, ինչպես նաև մեր մոդուլը, բայց մեկ մոդուլում կարող են լինել մի քանի գրադարաններ, և գրադարանի անունը միշտ չէ, որ համընկնում է մոդուլի անվան հետ:
Այժմ մենք մաքրում ենք քեշը, և մեր ոճերն ու Javascript-ը պետք է կիրառվեն: Հավանաբար, դուք ունեք տարբեր անուններ ընտրիչների համար, և ձեզ հարկավոր կլինի փոխել CSS / JS ֆայլերը: Եթե ինչ-որ բան ձեզ մոտ չի ստացվում, գրեք մեկնաբանություններում, մենք կկարգավորենք այն: