Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

3.5.5.1. Ներառեք jQuery OwlCarousel-ը Drupal Views-ին

07/11/2022, by Narine

Վերջին հոդվածում մենք սլայդ շոու պատրաստեցինք՝ օգտագործելով 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.

Պատվերով մոդուլ ավելացնելու արդյունքում մենք ստանում ենք հետևյալ սլայդշոուն.

OwlCarousel

Նախ անհրաժեշտ է ստեղծել մեր մոդուլի թղթապանակը բոլոր մոդուլների թղթապանակում.

/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-ի համար՝

https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

Սրա համար, ես ստեղծել եմ 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 ֆայլերը: Եթե ինչ-որ բան ձեզ մոտ չի ստացվում, գրեք մեկնաբանություններում, մենք կկարգավորենք այն: