3.5.5.1. Drupal Views में jQuery OwlCarousel शामिल करना

पिछले लेख में, हमने Views Slideshow का उपयोग करके एक स्लाइडशो बनाया था। लेकिन अब भी हमारे पास एक बिना स्टाइल का पेजिनेटर है जिसमें छोटी तस्वीरें हैं।

इस लेख में, हम देखेंगे कि OwlCarousel को कैसे जोड़ा जाए और अतिरिक्त लाइब्रेरी का उपयोग करके CSS कैसे जोड़ी जाए।

इस उदाहरण में, हम एक कस्टम मॉड्यूल का उपयोग करेंगे ताकि OwlCarousel को जोड़ा जा सके, लेकिन अगली बार हम स्लाइडशो को थीम की फ़ाइलों में स्टाइल करेंगे।

https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip

स्लाइडशो बनाने के बारे में आप पिछले लेख में पढ़ सकते हैं:

3.5.5. Views Slideshow - Views के माध्यम से jQuery स्लाइडशो और कैरोसेल आउटपुट करना।

कस्टम मॉड्यूल जोड़ने के बाद हमें यह स्लाइडशो मिलेगा:

1️⃣ मॉड्यूल फ़ोल्डर बनाना

सबसे पहले हमें अपने मॉड्यूल का फ़ोल्डर बनाना है:

/modules/custom

फिर मॉड्यूल की जानकारी (information) फ़ाइल बनाएँ:

/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 में मॉड्यूल डेवलपमेंट पर आगे विस्तार से चर्चा करेंगे, अभी हम केवल यह समझेंगे कि किसी कस्टम मॉड्यूल में लाइब्रेरी कैसे जोड़ी जाती है।

• name — मॉड्यूल का नाम
• description — मॉड्यूल का विवरण
• type — यह थीम है या मॉड्यूल
• core — Drupal कोर का संस्करण जिसके लिए मॉड्यूल बनाया गया है
• package — यह किस पैकेज समूह से संबंधित है

2️⃣ OwlCarousel लाइब्रेरी जोड़ना

अब हमें OwlCarousel जोड़नी होगी। आप इसे यहाँ से डाउनलोड कर सकते हैं:

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 पर लागू होती है। हमने इस div में owl-carousel क्लास भी जोड़ी है ताकि OwlCarousel के डिफ़ॉल्ट स्टाइल्स लागू हो सकें।

Responsive विकल्पों के माध्यम से हम अलग-अलग स्क्रीन आकारों के लिए स्लाइड्स की संख्या निर्धारित कर सकते हैं — जैसे:

• 0 से 600 पिक्सेल तक — 3 आइटम
• 600 से 1000 पिक्सेल तक — 4 आइटम
• 1000 पिक्सेल और उससे अधिक — 5 आइटम

OwlCarousel प्लगइन अपने आप इमेज आकारों को समायोजित कर देता है।

3️⃣ कस्टम CSS जोड़ना

अब हम एक अतिरिक्त 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;
  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;
  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;
  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;
  border: 0;
}

4️⃣ लाइब्रेरी बनाना

अब हमें Drupal में सभी CSS और JS को लाइब्रेरी के रूप में जोड़ना होगा। इसके लिए यह फ़ाइल बनाएं:

/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

dependencies में jQuery जोड़ना ज़रूरी है क्योंकि OwlCarousel को इसकी आवश्यकता होती है। हमने अपनी CSS/JS फ़ाइलों को OwlCarousel की फ़ाइलों के बाद जोड़ा है ताकि उन्हें ओवरराइड किया जा सके।

5️⃣ मॉड्यूल फ़ाइल बनाना

अब हम अपनी लाइब्रेरी को सक्रिय करने के लिए यह फ़ाइल जोड़ते हैं:

/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';
  }
}

यहाँ हम “slideshow” नाम की View के लिए अपनी लाइब्रेरी जोड़ रहे हैं। लाइब्रेरी का नाम दो भागों से बना है — पहले मॉड्यूल का नाम (drupalbook_owlcarousel) और फिर लाइब्रेरी का नाम जो drupalbook_owlcarousel.libraries.yml फ़ाइल में है।

अब कैश साफ़ करें (Clear cache) और आपकी स्टाइल्स और JavaScript लागू हो जानी चाहिए।

यदि आपके सेलेक्टर्स के नाम अलग हैं, तो CSS या JS को उसके अनुसार बदलें। अगर कुछ काम न करे तो टिप्पणी में लिखें — हम साथ में समाधान निकालेंगे।