उल्लू कैरोसेल: सेटअप और कनेक्टिविटी

उनकी अपनी साइट पर कई लोग देखना चाहते हैंस्लाइडर्स ब्लॉक हैं जो स्क्रीन पर सामग्री के एक टुकड़े को प्रदर्शित करते हैं, और एक निश्चित अवधि के बाद इस सामग्री को दूसरे में बदलते हैं। स्वाभाविक रूप से, प्रत्येक वेब डेवलपर HTML, CSS और जावास्क्रिप्ट का उपयोग करके अपने दम पर एक स्लाइडर बनाने में सक्षम है, लेकिन यह हमेशा समझ में नहीं आता है। आप काफी समय बिताएंगे, जबकि इंटरनेट पर काफी कुछ तैयार समाधान हैं जो आपके जीवन को बहुत आसान बनाते हैं और आपकी साइट को बहुत अधिक आकर्षक बनाते हैं। यह लेख उल्लू हिंडोला नामक एक ऐसे समाधान पर ध्यान केंद्रित करेगा। इस स्लाइडर को स्थापित करना अविश्वसनीय रूप से आसान है, इसलिए एक शुरुआत भी इसे संभाल सकती है। अब आपको पता चल जाएगा कि यह स्लाइडर क्या है, साथ ही साथ अन्य महत्वपूर्ण विवरण भी हैं। उल्लू हिंडोला सेटअप कदम से कदम किया जाता है, इसलिए आपको केवल इस सामग्री का अध्ययन करना चाहिए।

यह क्या है और आपको इस विशेष स्लाइडर को क्यों चुनना चाहिए?

उल्लू हिंडोला, जिसकी सेटिंग होगीइस लेख में माना जाता है, एक बहुत प्रभावी प्लगइन है जो आपके पृष्ठ पर एक सुंदर और सुविधाजनक स्लाइडर जोड़ता है, जो साइट पर आपके काम की सुविधा प्रदान करेगा, जिससे आपके पास बहुत समय, प्रयास और धन की बचत होगी। इस विशेष प्लगइन के फायदे क्या हैं, क्योंकि वेब पर काफी कुछ स्लाइडर्स हैं? तथ्य यह है कि यह स्लाइडर आपको दर्जनों अनुकूलन विकल्प प्रदान करता है, जो आपको अपने पृष्ठ को अद्वितीय और अनुपयोगी बनाने की अनुमति देगा। यह एक उत्तरदायी प्लगइन है जो सभी ब्राउज़र संस्करणों पर काम करेगा और वर्डप्रेस और अन्य लोकप्रिय सीएमएस द्वारा आसानी से जुड़ा जा सकता है। सामान्य तौर पर, इस स्लाइडर के कई फायदे हैं, इसलिए आपको निश्चित रूप से इसका विकल्प चुनना चाहिए। हालाँकि, इससे पहले कि आप उल्लू हिंडोला को कॉन्फ़िगर करना शुरू कर सकें, इस प्लगइन को अभी भी डाउनलोड करने की आवश्यकता है।

डाउनलोड

उल्लू हिंडोला 2 सेटअप जब तक आप संभव नहीं हैइसे आपके कंप्यूटर पर डाउनलोड किया गया है, और चूंकि यह एक चरण-दर-चरण निर्देश है, यह शुरुआत से ही लायक है। इसलिए, पैकेज प्रबंधकों का उपयोग करके कार्यक्रम डाउनलोड किया जा सकता है, लेकिन ये उन्नत डेवलपर टूल हैं, इसलिए यहां यह वर्णित किया जाएगा कि इस प्लगइन को मानक तरीके से कैसे प्राप्त किया जाए। आपको प्लगइन की आधिकारिक वेबसाइट पर जाने और इसके नवीनतम संस्करण को डाउनलोड करने की आवश्यकता है। उसके बाद, सभी डाउनलोड की गई फ़ाइलों को आपकी साइट की निर्देशिका में स्थानांतरित करने की आवश्यकता है, एक सुविधाजनक फ़ोल्डर तैयार किया है, जिसका नाम प्लगइन के समान है। ध्यान दें कि यह प्लगइन jQuery से संबंधित है, इसलिए आपको इस लाइब्रेरी को भी उपलब्ध होना चाहिए। खैर, जब आप इस प्लगइन को डाउनलोड करते हैं, तो आपको अगले चरण से निपटना होगा, जो उल्लू हिंडोला 2 स्लाइडर को अनुकूलित कर रहा है।

सीएसएस

उल्लू हिंडोला १।3 सेटिंग्स लगभग दूसरे नए संस्करण की तरह ही रहती हैं, केवल नई सुविधाएँ जोड़ी जाती हैं। हालाँकि, मूल जानकारी वही होगी जो आपके दस्तावेज़ में CSS जोड़ने के साथ शुरू होगी। तो पहला कदम HTML कोड में लाइन जोड़ना है <लिंक rel = "स्टाइलशीट" href = "owlcarousel / owl.carousel.min.css">... यह आपको क्या देता है?यह वह रेखा है जो स्लाइडर को प्रदर्शित करने के लिए आवश्यक शैलियों को साइट पर लोड करती है। इस बिंदु पर, आप दृश्य प्रसंस्करण स्वयं करके समाप्त कर सकते हैं। हालांकि, एक अधिक सुविधाजनक और तेज़ समाधान है। आप लाइन भी जोड़ सकते हैं <कड़ीजो डिफ़ॉल्ट थीम को भी लोड करता हैस्लाइडर, यह तुरन्त उपयोग करने के लिए तैयार है। आप अपने स्लाइडर को अधिक अद्वितीय और असामान्य बनाने के लिए कुछ शैलियों को संपादित कर सकते हैं, साथ ही अपनी सामग्री के लिए अधिक उपयुक्त भी। स्वाभाविक रूप से, रूसी में उल्लू हिंडोला सेटिंग्स बहुत सुविधाजनक होगी, लेकिन साइटों को बनाने वाले प्रत्येक व्यक्ति को यह समझना चाहिए कि वह अंग्रेजी के ज्ञान के बिना नहीं कर सकता है।

जावा कनेक्शन

स्वाभाविक रूप से, स्लाइडर जेएस के बिना काम नहीं करेगा,इसलिए, आपको आवश्यक कोड वाली उपयुक्त फ़ाइल को शामिल करने के लिए भी ध्यान रखने की आवश्यकता है। इसके लिए आपको कोड की एक पंक्ति डालने की आवश्यकता है प्रलेखन से, हालाँकि, एक शर्त पूरी करनी होगी।हर कोई जानता है कि जेएस एक प्रोग्रामिंग भाषा है जो क्रम में सभी कमांड को निष्पादित करती है, इसलिए इस मामले में आपको उस लाइन के बाद कोड की लाइन को जोड़ना चाहिए जो आपके दस्तावेज़ में jQuery लाइब्रेरी जोड़ता है। इस स्लाइडर के मामले में आपको JS के साथ और कुछ करने की आवश्यकता नहीं है।

HTML स्वरूपण

खैर आपने स्लाइडर को हुक किया, अब समय आ गया हैडिजाइन और इसे अनुकूलित। सबसे पहले, आपको अपने पेज पर स्लाइडर को दिखाने के लिए HTML कोड लिखना होगा। ऐसा करने के लिए, आपको एक कंटेनर बनाने की आवश्यकता है जो स्लाइड्स को पकड़ेगा। यह div टैग का उपयोग करके किया जा सकता है, जिसे उल्लू-हिंडोला वर्ग को सौंपा जाना चाहिए। यह वह वर्ग है जो यह सुनिश्चित करता है कि स्लाइडर से संबंधित सभी शैलियों को सक्रिय किया जाएगा। आप एक और वर्ग - उल्लू-विषय भी जोड़ सकते हैं। यह काम में आएगा यदि आप डिफ़ॉल्ट डिज़ाइन का उपयोग करने का निर्णय लेते हैं या स्लाइडर के मानक संस्करण को आगे के काम के लिए आधार के रूप में लेते हैं।

फिर आपको एक अलग टैग में एक div टैग के साथ प्रत्येक स्लाइड को जोड़ने की आवश्यकता है। स्वाभाविक रूप से, आप अन्य टैग का भी उपयोग कर सकते हैं, लेकिन यह टैग स्लाइडर के लिए सबसे उपयुक्त है।

प्लगइन कॉल

ठीक है, आपकी साइट पर दिखने के लिए तैयार स्लाइडर के लिए आपको जो आखिरी काम करना है वह कोड के इस ब्लॉक का उपयोग करना है:

$ (दस्तावेज़)। पहले से ही (फ़ंक्शन) ({

$ ("उल्लू-हिंडोला"); उल्लूकारसेल ();

});

यह सुनिश्चित करता है कि स्लाइडर शुरू होफ़ंक्शन, अर्थात्, जब आपका पृष्ठ लोड होता है तो सामग्री को स्क्रॉल करें। उसी कोड के साथ, आप उल्लू हिंडोला को वर्डप्रेस से कनेक्ट कर सकते हैं। इस प्लगइन के लिए सेटिंग्स कई और विविध हैं, और अब आप सबसे महत्वपूर्ण बिंदुओं के बारे में जानेंगे।

स्लाइडर का रूप और कार्यक्षमता अनुकूलित करना

तो आप किस कमांड का उपयोग कर सकते हैं,अपने स्लाइडर को अनुकूलित करने के लिए? सबसे पहले, आपको आइटम कमांड को याद रखने की आवश्यकता है, क्योंकि इसके साथ आप अपने स्लाइडर में विशिष्ट संख्या में स्लाइड सेट कर सकते हैं। लूप कमांड आपको चुनने की अनुमति देगा कि स्लाइडर को लूप करें या अंतिम तत्व पर स्क्रॉल करना बंद करें। एक ड्रैग कमांड भी है जिसमें कई विकल्प हैं जैसे माउस और टच। पहले मामले में, आप इसे बना सकते हैं ताकि आपके स्लाइडर के तत्वों को नीचे रखे माउस के साथ फ़्लिप किया जा सके, और दूसरे मामले में, एक स्पर्श की मदद से (यह कमांड मोबाइल उपकरणों के लिए उपयुक्त है)। एक अन्य महत्वपूर्ण कमान नौसेना है, जो नेविगेशन तीरों के प्रदर्शन को सक्षम करती है। इसके साथ, नेविगेशन बटन पर लेबल जोड़ने के लिए आप navText कमांड का उपयोग कर सकते हैं। इसके अलावा, आपको ऑटोप्ले कमांड के बारे में नहीं भूलना चाहिए, जो आपको पेज लोड पर अपने स्लाइडर स्लाइड को चालू करने की स्वचालित शुरुआत को बंद और चालू करने की अनुमति देता है। इस कमांड के साथ, आप ऑटोप्लेइमाउटआउट का भी उपयोग कर सकते हैं, जिसके लिए आप मिलीसेकंड में एक विशिष्ट मान सेट कर सकते हैं जो प्रत्येक स्लाइड को स्वचालित रूप से फ़्लिप करने के बीच के समय को निर्धारित करेगा।

यदि आप उत्तरदायी वेब डिज़ाइन का उपयोग कर रहे हैं तोयदि आपका पेज डिज़ाइन स्वचालित रूप से उस डिवाइस के आधार पर बदल जाता है, जिस पर इसे देखा जाता है, तो आपको निश्चित रूप से उत्तरदायी कमांड के बारे में याद रखना होगा, जो आपको स्क्रीन की चौड़ाई के आधार पर प्रदर्शित स्लाइड की संख्या सेट करने की अनुमति देता है, जिस पर पेज को देखा जाता है।