कई लोग अपनी साइट पर स्लाइडर देखना चाहते हैं - ये ऐसे ब्लॉक हैं जो स्क्रीन पर एक सामग्री तत्व प्रदर्शित करते हैं, और एक निश्चित अवधि के बाद इस सामग्री को दूसरे में बदल देते हैं। स्वाभाविक रूप से, प्रत्येक वेब डेवलपर स्वतंत्र रूप से HTML, CSS और जावास्क्रिप्ट का उपयोग करके एक स्लाइडर बनाने में सक्षम है, लेकिन इसका हमेशा कोई मतलब नहीं होता है। आप काफी समय व्यतीत करेंगे, इस तथ्य के बावजूद कि इंटरनेट पर कुछ तैयार समाधान हैं जो आपके जीवन को बहुत आसान बनाते हैं और आपकी साइट को और अधिक आकर्षक बनाते हैं। यह लेख उल्लू हिंडोला नामक इन समाधानों में से एक पर केंद्रित होगा। इस स्लाइडर को सेट करना अविश्वसनीय रूप से सरल है, इसलिए एक नौसिखिया भी इसे संभाल सकता है। अब आप सीखेंगे कि यह स्लाइडर क्या है, साथ ही अन्य महत्वपूर्ण विवरण भी। उल्लू हिंडोला की स्थापना एक चरण-दर-चरण प्रक्रिया है, इसलिए आपको इस सामग्री का अध्ययन क्रम में ही करना चाहिए।
यह क्या है और आपको यह विशेष स्लाइडर क्यों चुनना चाहिए?
उल्लू हिंडोला, जिसके विन्यास पर इस लेख में चर्चा की जाएगी, एक बहुत ही प्रभावी प्लगइन है जो आपके पृष्ठ पर एक सुंदर और सुविधाजनक स्लाइडर जोड़ता है, जो साइट पर आपके काम को बहुत सुविधाजनक बनाएगा,बहुत समय, प्रयास और धन की बचत। इस विशेष प्लगइन के क्या फायदे हैं, क्योंकि वेब पर काफी सारे स्लाइडर हैं? तथ्य यह है कि यह स्लाइडर आपको दर्जनों अनुकूलन विकल्प प्रदान करता है, जो आपको अपने पृष्ठ को अद्वितीय और अनुपयोगी बनाने की अनुमति देगा। यह एक उत्तरदायी प्लगइन है जो सभी ब्राउज़र संस्करणों पर काम करेगा और इसे आसानी से वर्डप्रेस और अन्य लोकप्रिय सीएमएस से जोड़ा जा सकता है। सामान्य तौर पर, इस स्लाइडर के बहुत सारे फायदे हैं, इसलिए आपको निश्चित रूप से इसके पक्ष में चुनाव करना चाहिए। हालांकि, इससे पहले कि आप उल्लू हिंडोला स्थापित करना शुरू करें, इस प्लगइन को अभी भी लोड करने की आवश्यकता है।
डाउनलोड करें
उल्लू हिंडोला 2 को सेट करना संभव नहीं है यदि आपने इसे अपने कंप्यूटर पर डाउनलोड नहीं किया है, और चूंकि यह एक चरण-दर-चरण निर्देश है, इसलिए आपको शुरुआत से ही शुरुआत करनी चाहिए। तो, पैकेज प्रबंधकों का उपयोग करके प्रोग्राम को डाउनलोड किया जा सकता है, लेकिन ये उन्नत डेवलपर टूल हैं, इसलिए यहां हम आपको बताएंगे कि इस प्लगइन को मानक तरीके से कैसे प्राप्त करें। आपको प्लगइन की आधिकारिक वेबसाइट पर जाना होगा और इसका नवीनतम संस्करण डाउनलोड करना होगा। उसके बाद, सभी डाउनलोड की गई फ़ाइलों को एक सुविधाजनक फ़ोल्डर तैयार करके, आपकी साइट की निर्देशिका में स्थानांतरित किया जाना चाहिए, जिसे प्लगइन के समान ही नाम दिया गया है। ध्यान दें कि यह प्लगइन jQuery के साथ बंडल किया गया है, इसलिए आपके पास वह लाइब्रेरी भी उपलब्ध होनी चाहिए। ठीक है, एक बार जब आप इस प्लगइन को डाउनलोड कर लेते हैं, तो आपको अगले चरण का ध्यान रखना होगा जो उल्लू हिंडोला स्लाइडर 2 सेट कर रहा है।
सीएसएस
बीउल्लू हिंडोला 1.3 सेटिंग्स लगभग नए संस्करण 2 की तरह ही रहती हैं, केवल नई सुविधाएँ जोड़ी जाती हैं। हालाँकि, मूल जानकारी वही होगी, जो आपके दस्तावेज़ में CSS जोड़ने से शुरू होगी। तो पहला कदम लाइन जोड़ना है। वह आपको क्या देती है? यह एक स्ट्रिंग है जो स्लाइडर को प्रदर्शित करने के लिए आवश्यक शैलियों को साइट पर लोड करती है। यह वह जगह है जहाँ आप स्वयं दृश्य प्रसंस्करण करके समाप्त कर सकते हैं। हालांकि, एक अधिक सुविधाजनक और तेज़ समाधान है। आप एक लाइन भी जोड़ सकते हैं जो स्लाइडर की डिफ़ॉल्ट थीम को भी लोड करती है, जिससे यह तुरंत उपयोग के लिए तैयार हो जाता है। आप अपने स्लाइडर को अधिक विशिष्ट और भिन्न, और अपनी सामग्री के लिए अधिक उपयुक्त बनाने के लिए कुछ शैलियों को संपादित कर सकते हैं। स्वाभाविक रूप से, रूसी में उल्लू हिंडोला सेटिंग बहुत सुविधाजनक होगी, लेकिन वेबसाइट बनाने वाले प्रत्येक व्यक्ति को यह समझना चाहिए कि वह अंग्रेजी के ज्ञान के बिना नहीं कर सकता।
जावास्प्रिट कनेक्शन
बेशक, जेएस के बिना स्लाइडर काम नहीं करेगा, इसलिए आपको आवश्यक कोड वाली उपयुक्त फ़ाइल को शामिल करने का भी ध्यान रखना चाहिए। ऐसा करने के लिए, आपको दस्तावेज़ीकरण से कोड की एक पंक्ति डालने की आवश्यकता है, हालांकि, एक शर्त पूरी होनी चाहिए। हर कोई जानता है कि जेएस एक प्रोग्रामिंग भाषा है जो सभी आदेशों को क्रम में निष्पादित करती है, इसलिए इस मामले में आपको कोड की इस पंक्ति को उस पंक्ति के बाद जोड़ना चाहिए जो आपके दस्तावेज़ में jQuery लाइब्रेरी जोड़ता है। इस स्लाइडर के मामले में जेएस के साथ और अधिक, आपको कुछ नहीं करना हैजरूरत।
एचटीएमएल कोडिंग
ठीक है, आपने स्लाइडर को कनेक्ट कर लिया है, अब इसे डिज़ाइन और कस्टमाइज़ करने का समय आ गया है। सबसे पहले, आपको अपने पृष्ठ पर स्लाइडर को प्रदर्शित करने के लिए HTML कोड लिखना होगा। ऐसा करने के लिए, आपको एक कंटेनर बनाना होगा जिसमें स्लाइड्स हों। यह div टैग का उपयोग करके किया जा सकता है, जिसे उल्लू-हिंडोला वर्ग निर्दिष्ट करने की आवश्यकता होती है। यह वह वर्ग है जो यह सुनिश्चित करता है कि स्लाइडर से संबंधित सभी शैलियों को सक्रिय किया जाएगा। आप एक और क्लास - उल्लू-थीम भी लिख सकते हैं। यदि आप डिफ़ॉल्ट डिज़ाइन का उपयोग करने का निर्णय लेते हैं या आगे के काम के लिए स्लाइडर के मानक संस्करण को आधार के रूप में लेने का निर्णय लेते हैं तो यह काम आएगा।
फिर आपको प्रत्येक स्लाइड को एक डिव टैग के साथ एक अलग कंटेनर में जोड़ना होगा। बेशक, आप अन्य टैग का उपयोग कर सकते हैं, लेकिन यह टैग स्लाइडर के लिए सबसे अच्छा है।
कॉल प्लगइन
और अपनी साइट पर तैयार स्लाइडर रखने के लिए आखिरी चीज जो आपको करने की जरूरत है वह है कोड के इस ब्लॉक का उपयोग करना:
$(दस्तावेज़)।रेडी (फ़ंक्शन(){
$(.owl-carousel ).owlCarousel();
});
यह सुनिश्चित करता है कि स्लाइडर काम करना शुरू कर देता है, यानी जब आपका पेज लोड होता है, तो सामग्री को स्क्रॉल करें। उसी कोड से आप Owl Carousel को WordPress से Connect कर सकते हैं। इस प्लगइन की सेटिंग्स कई और विविध हैं, और अब आप सबसे महत्वपूर्ण बिंदुओं के बारे में जानेंगे।
स्लाइडर का रूप और कार्यक्षमता सेट करना
तो आप अपने स्लाइडर को कस्टमाइज़ करने के लिए किन कमांड का उपयोग कर सकते हैं? सबसे पहले, आपको आइटम कमांड को याद रखना होगा, क्योंकि इसके साथ आप अपने स्लाइडर में एक विशिष्ट संख्या में स्लाइड सेट कर सकते हैं। लूप कमांड आपको यह चुनने की अनुमति देगा कि स्लाइडर को लूप करना है या अंतिम तत्व पर स्क्रॉल करना बंद करना है। ड्रैग कमांड भी है, जिसमें कई विकल्प हैं, जैसे माउस और टच। पहले मामले में, आप इसे बना सकते हैं ताकि आपके स्लाइडर के तत्वों को नीचे दबाए हुए माउस से स्वाइप किया जा सके, और दूसरे मामले में, एक स्पर्श की मदद से (यह कमांड मोबाइल उपकरणों के लिए उपयुक्त है)। एक अन्य महत्वपूर्ण कमांड एनएवी है, जो नेविगेशन तीरों के प्रदर्शन को सक्षम बनाता है। इसके साथ ही, आप नेविगेशन बटन में लेबल जोड़ने के लिए navText कमांड का उपयोग कर सकते हैं। इसके अलावा, आपको ऑटोप्ले कमांड के बारे में नहीं भूलना चाहिए, जो आपको पेज लोड होने पर अपने स्लाइडर की स्लाइड्स को चालू करने की स्वचालित शुरुआत को सक्षम और अक्षम करने की अनुमति देता है। इस कमांड के साथ, आप ऑटोप्लेटाइमआउट का भी उपयोग कर सकते हैं, जिसके लिए आप मिलीसेकंड में एक विशिष्ट मान सेट कर सकते हैं, जो प्रत्येक स्लाइड के स्वचालित मोड़ के बीच का समय निर्धारित करेगा।
यदि आप रिस्पॉन्सिव वेब डिज़ाइन का उपयोग करते हैं, यानी आपके पेज का डिज़ाइन अपने आप बदल जाता है, तो यह निर्भर करता है कि इसे किस डिवाइस पर देखा गया है, तो आपको निश्चित रूप से रिस्पॉन्सिव कमांड को याद रखना होगा, जो आपको स्लाइड्स की संख्या निर्धारित करने की अनुमति देता है। जिस स्क्रीन पर पेज देखा जा रहा है उसकी स्क्रीन की चौड़ाई के आधार पर प्रदर्शित करने के लिए।
