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

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

यह क्या है और यह स्लाइडर चुनने के लायक क्यों है?

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

डाउनलोड

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

सीएसएस

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

JavaSpript कनेक्टिंग

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

एचटीएमएल कोड बनाना

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

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

प्लगइन को कॉल करें

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

$ (दस्तावेज़) .ready (फ़ंक्शन () {

$ (".wl-carousel")। उल्लू कैरोसेल ();

});

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

स्लाइडर के स्वरूप और कार्यक्षमता को समायोजित करना

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

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