शानदार स्लाइड फ़्लिपिंग प्रभाव वाला एक जावास्क्रिप्ट-मुक्त स्लाइडर। किसी भी डिवाइस के लिए पूरी तरह से अनुकूल हो जाता है। स्रोत उपलब्ध हैं.
शुद्ध सीएसएस स्लाइडर जेएस स्क्रिप्ट की सहायता के बिना स्वचालित स्लाइड स्विचिंग वाला एक तैयार स्लाइडर है। एक नियम के रूप में, इस प्रकार के स्लाइडर्स को नौसिखिया डेवलपर्स द्वारा या ऐसे मामलों में सराहा जाता है जहां पुस्तकालयों को शामिल करने की कोई संभावना/आवश्यकता नहीं है।
बेशक, स्लाइडर बनाने के लिए विशेष प्लगइन्स का उपयोग करना आसान है (उनमें से बहुत सारे हैं, उदाहरण के लिए jQuery)। लेकिन यह स्लाइडर स्लाइडों को पलटने के अपने असामान्य प्रभाव से आकर्षित करता है। इसके अलावा, उच्च उत्पादकता के साथ।
उपरोक्त लिंक से, आप उस संग्रह को डाउनलोड कर सकते हैं जिसमें स्लाइडर-css.html फ़ाइल स्थित होगी। सिद्धांत रूप में, आपको अपनी साइट पर सीएसएस स्लाइडर चलाने के लिए जो कुछ भी चाहिए वह इस फ़ाइल में है। यहां आपके कार्यों का एल्गोरिदम है:
1. स्लाइडर ब्लॉक की सभी शैलियों को कॉपी करें, वे टैग में हैं
|
कृपया ध्यान दें कि कंटेनर.अनटाइटल्ड में स्थिति: पूर्ण गुण हैं और आपको इसे अपने लिए थोड़ा अनुकूलित करना पड़ सकता है।
2. सभी स्लाइड्स लपेटी गई हैं
< div class = "untitled" > < div class = "untitled__slides" > . . . < / div > < / div > |
3. स्लाइड के HTML कोड को समझना कठिन नहीं है।
< div class = "untitled__slide" > < div class = "untitled__slideBg" > < / div > < div class = "untitled__slideContent" > < span >लंडन< / span > < span >स्काउट< / span > < a class = "button" href = "https://unsplash.com/@scoutthecity"लक्ष्य = "/काला" > प्रोफाइल अनस्प्लैश करें< / a > |
मैं अमेरिका को किसी के लिए नहीं खोलूंगा, मैं किसी नई चाल से जनता को आश्चर्यचकित नहीं करूंगा और मैं उन लोगों के दिमाग को नहीं उड़ाऊंगा जो स्कूबा गोताखोर की तरह CSS3 में तैरते हैं। मैं आपको जावास्क्रिप्ट की आवश्यकता के बिना सरल CSS3 फ़ंक्शंस का उपयोग करके स्लाइडर बनाने का एक आसान तरीका बताऊंगा।
* (मार्जिन: 0; पैडिंग: 0; -वेबकिट-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; -ओ-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; बॉक्स-साइजिंग: बॉर्डर-बॉक्स ; ) मुख्य भाग (पृष्ठभूमि-छवि: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
पृष्ठभूमि के डिज़ाइन और सामान्य शैलियों के साथ, सब कुछ स्पष्ट है।
रैपर (ऊंचाई: 350px; मार्जिन: 100px ऑटो 0; स्थिति: सापेक्ष; चौड़ाई: 700px; ) .स्लाइडर (पृष्ठभूमि-रंग: #ddd; ऊंचाई: इनहेरिट; अतिप्रवाह: छिपा हुआ; स्थिति: सापेक्ष; चौड़ाई: इनहेरिट; -वेबकिट- बॉक्स-छाया: 0 0 20पीएक्स आरजीबीए(0, 0, 0, .5); -मोज़-बॉक्स-छाया: 0 0 20पीएक्स आरजीबीए(0, 0, 0, .5); -ओ-बॉक्स-छाया: 0 0 20px rgba(0, 0, 0, .5); बॉक्स-छाया: 0 0 20px rgba(0, 0, 0, .5); )
पृष्ठ पर स्लाइडर की स्थिति को पूरी तरह से नियंत्रित करने के लिए सामान्य ब्लॉक और स्लाइडर वाले ब्लॉक के आयाम समान हैं। हालांकि कोई स्लाइड नहीं है, हमने अस्थायी रूप से स्लाइडर को हल्के भूरे रंग में रंग दिया है।
रैपर> इनपुट (प्रदर्शन: कोई नहीं;)
हम रेडियो बटन छुपाते हैं। हमें बाद में उनकी आवश्यकता होगी.
अब तक का परिणाम यह है:
स्लाइड (ऊंचाई: इनहेरिट; स्थिति: निरपेक्ष; चौड़ाई: इनहेरिट; ) .slide1 ( बैकग्राउंड-इमेज: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); ) .slide2 ( बैकग्राउंड -छवि: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 (पृष्ठभूमि-छवि: url(http://habrastorage.org/files/663/6b1/ d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); ) .slide4 ( पृष्ठभूमि-छवि: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); ) .slide5 (पृष्ठभूमि-छवि: यूआरएल(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); )
सभी स्लाइडों के लिए, हमने पूर्ण स्थिति निर्दिष्ट की है ताकि आप उपस्थिति प्रभावों के साथ खेल सकें। स्लाइड का आकार स्लाइडर के आकार से ही लिया जाता है, ताकि उन्हें कई स्थानों पर लिखना न पड़े।
रैपर .नियंत्रण (बाएं: 50%; मार्जिन-बाएं: -98px; स्थिति: पूर्ण; ) .रैपर लेबल (कर्सर: पॉइंटर; डिस्प्ले: इनलाइन-ब्लॉक; ऊंचाई: 8px; मार्जिन: 25px 12px 0 16px; स्थिति: सापेक्ष; चौड़ाई: 8पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-बॉर्डर-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; ) .रैपर लेबल:बाद में (बॉर्डर: 2px ठोस #ddd; सामग्री: " "; प्रदर्शन: ब्लॉक; ऊँचाई: 12px; बाएँ: -4px; स्थिति: पूर्ण; शीर्ष: -4px; चौड़ाई: 12px; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -मोज़-बॉर्डर -त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; )
हम नेविगेशन को क्लासिक बनाते हैं। प्रत्येक बटन एक वृत्त के रूप में एक क्षेत्र का प्रतिनिधित्व करता है, जिसके भीतर, जब स्लाइड सक्रिय होती है, तो खाली क्षेत्र आंशिक रूप से रंगीन होगा। अब तक हमारे पास निम्नलिखित परिणाम हैं:
रैपर लेबल (कर्सर: पॉइंटर; डिस्प्ले: इनलाइन-ब्लॉक; ऊँचाई: 8px; मार्जिन: 25px 12px 0 16px; स्थिति: सापेक्ष; चौड़ाई: 8px; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -moz-बॉर्डर-त्रिज्या: 50 %; -o-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; -वेबकिट-संक्रमण: पृष्ठभूमि आसानी से अंदर-बाहर .5s; -moz-संक्रमण: पृष्ठभूमि आसानी से अंदर-बाहर .5s; -o- ट्रांज़िशन: बैकग्राउंड ईज़-इन-आउट .5s; ट्रांज़िशन: बैकग्राउंड ईज़-इन-आउट .5s; ) .रैपर लेबल: होवर, #स्लाइड1:चेक ~ .कंट्रोल लेबल:nth-of-type(1), #slide2: चेक किया गया ~ .नियंत्रण लेबल: nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) , #स्लाइड5:चेक किया गया ~ .नियंत्रण लेबल:nth-of-type(5) (पृष्ठभूमि: #ddd;)
सजाए गए नेविगेशन बटनों में, हम उनके अंदर चिकना रंग जोड़ते हैं। हम ऐसी शर्तें भी जोड़ते हैं जिनके तहत सक्रिय बटन और जिस बटन पर कर्सर घुमाया जाता है वह आसानी से रंगीन हो जाएगा। हमारे कस्टम रेडियो बटन तैयार हैं:
स्लाइड (ऊंचाई: इनहेरिट; अपारदर्शिता: 0; स्थिति: निरपेक्ष; चौड़ाई: इनहेरिट; z-इंडेक्स: 0; -वेबकिट-ट्रांसफॉर्म: स्केल(1.5); -मोज़-ट्रांसफॉर्म: स्केल(1.5); -ओ-ट्रांसफॉर्म: स्केल (1.5); ट्रांसफ़ॉर्म: स्केल (1.5); -वेबकिट-ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5 एस, अपारदर्शिता ईज़ी-इन-आउट .5 एस; -मोज़-ट्रांज़िशन: ट्रांसफ़ॉर्म ईज़ी-इन-आउट .5 एस, अपारदर्शिता ईज़ -इन-आउट .5s; -ओ-ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5s, अपारदर्शिता ईज़ी-इन-आउट .5s; ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5s, अपारदर्शिता ईज़ी-इन-आउट .5s; ) #स्लाइड1:चेक किया गया ~ .स्लाइडर > .स्लाइड1, #स्लाइड2:चेक किया गया ~ .स्लाइडर > .स्लाइड2, #स्लाइड3:चेक किया गया ~ .स्लाइडर > .स्लाइड3, #स्लाइड4:चेक किया गया ~ .स्लाइडर > .स्लाइड4, #स्लाइड5:चेक किया गया ~ .स्लाइडर > .स्लाइड5 ( अपारदर्शिता: 1; जेड-इंडेक्स: 1; -वेबकिट-ट्रांसफॉर्म: स्केल(1); -मोज़-ट्रांसफॉर्म: स्केल(1); -ओ-ट्रांसफॉर्म: स्केल(1); ट्रांसफॉर्म: स्केल( 1); )
हम सामान्य स्लाइड शैलियों में गुण जोड़ते हैं जो सभी स्लाइडों को अदृश्य बना देते हैं और पृष्ठभूमि में फीके पड़ जाते हैं। हमने स्लाइडर में एक दिलचस्प उपस्थिति देने के लिए स्लाइडों को थोड़ा बड़ा करके भी जोड़ा है, जबकि वे अदृश्य हैं।
परिणाम यहां देखा जा सकता है.
मैं अमेरिका को किसी के लिए नहीं खोलूंगा, मैं किसी नई चाल से जनता को आश्चर्यचकित नहीं करूंगा और मैं उन लोगों के दिमाग को नहीं उड़ाऊंगा जो स्कूबा गोताखोर की तरह CSS3 में तैरते हैं। मैं आपको जावास्क्रिप्ट की आवश्यकता के बिना सरल CSS3 फ़ंक्शंस का उपयोग करके स्लाइडर बनाने का एक आसान तरीका बताऊंगा।
* (मार्जिन: 0; पैडिंग: 0; -वेबकिट-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; -मोज़-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; -ओ-बॉक्स-साइजिंग: बॉर्डर-बॉक्स; बॉक्स-साइजिंग: बॉर्डर-बॉक्स ; ) मुख्य भाग (पृष्ठभूमि-छवि: url(http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png); )
पृष्ठभूमि के डिज़ाइन और सामान्य शैलियों के साथ, सब कुछ स्पष्ट है।
रैपर (ऊंचाई: 350px; मार्जिन: 100px ऑटो 0; स्थिति: सापेक्ष; चौड़ाई: 700px; ) .स्लाइडर (पृष्ठभूमि-रंग: #ddd; ऊंचाई: इनहेरिट; अतिप्रवाह: छिपा हुआ; स्थिति: सापेक्ष; चौड़ाई: इनहेरिट; -वेबकिट- बॉक्स-छाया: 0 0 20पीएक्स आरजीबीए(0, 0, 0, .5); -मोज़-बॉक्स-छाया: 0 0 20पीएक्स आरजीबीए(0, 0, 0, .5); -ओ-बॉक्स-छाया: 0 0 20px rgba(0, 0, 0, .5); बॉक्स-छाया: 0 0 20px rgba(0, 0, 0, .5); )
पृष्ठ पर स्लाइडर की स्थिति को पूरी तरह से नियंत्रित करने के लिए सामान्य ब्लॉक और स्लाइडर वाले ब्लॉक के आयाम समान हैं। हालांकि कोई स्लाइड नहीं है, हमने अस्थायी रूप से स्लाइडर को हल्के भूरे रंग में रंग दिया है।
रैपर> इनपुट (प्रदर्शन: कोई नहीं;)
हम रेडियो बटन छुपाते हैं। हमें बाद में उनकी आवश्यकता होगी.
अब तक का परिणाम यह है:
स्लाइड (ऊंचाई: इनहेरिट; स्थिति: निरपेक्ष; चौड़ाई: इनहेरिट; ) .slide1 ( बैकग्राउंड-इमेज: url(http://habrastorage.org/files/3f2/628/bd5/3f2628bd58c8452db516195cb0c9bfc9.jpg); ) .slide2 ( बैकग्राउंड -छवि: url(http://habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f97ba0e.jpg); ) .slide3 (पृष्ठभूमि-छवि: url(http://habrastorage.org/files/663/6b1/ d4f/6636b1d4f8e643d29eab8c192fc1cea3.jpg); ) .slide4 ( पृष्ठभूमि-छवि: url(http://habrastorage.org/files/e59/424/c04/e59424c046be4dab897d84ab015c87ea.jpg); ) .slide5 (पृष्ठभूमि-छवि: यूआरएल(http: //habrastorage.org/files/53c/ff6/c1c/53cff6c1caf842368c70b8ef892d8402.jpg); )
सभी स्लाइडों के लिए, हमने पूर्ण स्थिति निर्दिष्ट की है ताकि आप उपस्थिति प्रभावों के साथ खेल सकें। स्लाइड का आकार स्लाइडर के आकार से ही लिया जाता है, ताकि उन्हें कई स्थानों पर लिखना न पड़े।
रैपर .नियंत्रण (बाएं: 50%; मार्जिन-बाएं: -98px; स्थिति: पूर्ण; ) .रैपर लेबल (कर्सर: पॉइंटर; डिस्प्ले: इनलाइन-ब्लॉक; ऊंचाई: 8px; मार्जिन: 25px 12px 0 16px; स्थिति: सापेक्ष; चौड़ाई: 8पीएक्स; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -मोज़-बॉर्डर-त्रिज्या: 50%; -ओ-बॉर्डर-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; ) .रैपर लेबल:बाद में (बॉर्डर: 2px ठोस #ddd; सामग्री: " "; प्रदर्शन: ब्लॉक; ऊँचाई: 12px; बाएँ: -4px; स्थिति: पूर्ण; शीर्ष: -4px; चौड़ाई: 12px; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -मोज़-बॉर्डर -त्रिज्या: 50%; -ओ-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; )
हम नेविगेशन को क्लासिक बनाते हैं। प्रत्येक बटन एक वृत्त के रूप में एक क्षेत्र का प्रतिनिधित्व करता है, जिसके भीतर, जब स्लाइड सक्रिय होती है, तो खाली क्षेत्र आंशिक रूप से रंगीन होगा। अब तक हमारे पास निम्नलिखित परिणाम हैं:
रैपर लेबल (कर्सर: पॉइंटर; डिस्प्ले: इनलाइन-ब्लॉक; ऊँचाई: 8px; मार्जिन: 25px 12px 0 16px; स्थिति: सापेक्ष; चौड़ाई: 8px; -वेबकिट-बॉर्डर-त्रिज्या: 50%; -moz-बॉर्डर-त्रिज्या: 50 %; -o-सीमा-त्रिज्या: 50%; सीमा-त्रिज्या: 50%; -वेबकिट-संक्रमण: पृष्ठभूमि आसानी से अंदर-बाहर .5s; -moz-संक्रमण: पृष्ठभूमि आसानी से अंदर-बाहर .5s; -o- ट्रांज़िशन: बैकग्राउंड ईज़-इन-आउट .5s; ट्रांज़िशन: बैकग्राउंड ईज़-इन-आउट .5s; ) .रैपर लेबल: होवर, #स्लाइड1:चेक ~ .कंट्रोल लेबल:nth-of-type(1), #slide2: चेक किया गया ~ .नियंत्रण लेबल: nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) , #स्लाइड5:चेक किया गया ~ .नियंत्रण लेबल:nth-of-type(5) (पृष्ठभूमि: #ddd;)
सजाए गए नेविगेशन बटनों में, हम उनके अंदर चिकना रंग जोड़ते हैं। हम ऐसी शर्तें भी जोड़ते हैं जिनके तहत सक्रिय बटन और जिस बटन पर कर्सर घुमाया जाता है वह आसानी से रंगीन हो जाएगा। हमारे कस्टम रेडियो बटन तैयार हैं:
स्लाइड (ऊंचाई: इनहेरिट; अपारदर्शिता: 0; स्थिति: निरपेक्ष; चौड़ाई: इनहेरिट; z-इंडेक्स: 0; -वेबकिट-ट्रांसफॉर्म: स्केल(1.5); -मोज़-ट्रांसफॉर्म: स्केल(1.5); -ओ-ट्रांसफॉर्म: स्केल (1.5); ट्रांसफ़ॉर्म: स्केल (1.5); -वेबकिट-ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5 एस, अपारदर्शिता ईज़ी-इन-आउट .5 एस; -मोज़-ट्रांज़िशन: ट्रांसफ़ॉर्म ईज़ी-इन-आउट .5 एस, अपारदर्शिता ईज़ -इन-आउट .5s; -ओ-ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5s, अपारदर्शिता ईज़ी-इन-आउट .5s; ट्रांज़िशन: ट्रांसफॉर्म ईज़ी-इन-आउट .5s, अपारदर्शिता ईज़ी-इन-आउट .5s; ) #स्लाइड1:चेक किया गया ~ .स्लाइडर > .स्लाइड1, #स्लाइड2:चेक किया गया ~ .स्लाइडर > .स्लाइड2, #स्लाइड3:चेक किया गया ~ .स्लाइडर > .स्लाइड3, #स्लाइड4:चेक किया गया ~ .स्लाइडर > .स्लाइड4, #स्लाइड5:चेक किया गया ~ .स्लाइडर > .स्लाइड5 ( अपारदर्शिता: 1; जेड-इंडेक्स: 1; -वेबकिट-ट्रांसफॉर्म: स्केल(1); -मोज़-ट्रांसफॉर्म: स्केल(1); -ओ-ट्रांसफॉर्म: स्केल(1); ट्रांसफॉर्म: स्केल( 1); )
हम सामान्य स्लाइड शैलियों में गुण जोड़ते हैं जो सभी स्लाइडों को अदृश्य बना देते हैं और पृष्ठभूमि में फीके पड़ जाते हैं। हमने स्लाइडर में एक दिलचस्प उपस्थिति देने के लिए स्लाइडों को थोड़ा बड़ा करके भी जोड़ा है, जबकि वे अदृश्य हैं।
परिणाम यहां देखा जा सकता है.
जावास्क्रिप्ट स्लाइडर्स की तुलना में सीएसएस स्लाइडर्स के कुछ फायदे हैं। इनमें से एक लाभ लोडिंग गति है। न केवल स्लाइडर्स के लिए छवियों का उपयोग बड़े आकार में किया जाता है (यदि विभिन्न स्क्रीन के लिए कोई अनुकूलन नहीं है), बल्कि स्क्रिप्ट लोड करने में भी कुछ समय व्यतीत होता है। लेकिन लेख में आप केवल शुद्ध सीएसएस का उपयोग करने वाले स्लाइडर देखेंगे।
स्लाइडर्स के बारे में मुझे एक वेबसाइट पर यह मिला:
एक सीएसएस स्लाइडर जो स्लाइडों को नेविगेट करने के लिए रेडियो बटन का उपयोग करता है। ये रेडियो बटन स्लाइडर्स के नीचे स्थित हैं। साथ ही, रेडियो बटन के अलावा, बाएँ और दाएँ तीरों का उपयोग करके नेविगेशन किया जाता है। वर्तमान में कौन सी छवि प्रदर्शित है, इसका ट्रैक रखने के लिए :चेक किए गए छद्म-वर्गों का उपयोग किया जाता है।
पिछले सीएसएस स्लाइडर के विपरीत, यहां नीचे रेडियो बटन के बजाय सभी छवियों के थंबनेल हैं, जो छवि गैलरी बनाते समय भी सुविधाजनक है। छवियां एक अजीब प्रभाव के साथ बदलती हैं: बड़े होने पर वे आसानी से गायब हो जाती हैं।
लेकिन यह सीएसएस स्लाइडर बिक्री पृष्ठों के लिए बिल्कुल उपयुक्त है। एक नियम के रूप में, लैंडिंग पेज (बिक्री पेज) विकसित करते समय, कई वेब डेवलपर शुरुआत में ही एक स्लाइडर लगाते हैं, ताकि पहली स्क्रीन पर (स्क्रॉल किए बिना) विज़िटर तुरंत इस पेज पर उसके लिए उपलब्ध सभी लाभों को देख सके। हर चीज़ के अलावा, यह स्लाइडर अनुकूली है, जो अच्छा भी है।
मैं तुरंत नोट करना चाहूंगा कि यह स्लाइडर लिंक का उपयोग नहीं करता है! डिफ़ॉल्ट रूप से, मुख्य छवि (स्लाइड) के अलावा, 2 और स्लाइड दिखाई देती हैं। वे मुख्य के पीछे स्थित हैं। स्लाइड बदलना एक सुंदर मोड में होता है: सबसे पहले, दो स्लाइड अलग हो जाती हैं और जो स्लाइड फिर मुख्य बन जाएगी वह केंद्रित हो जाती है। फिर स्लाइड को बड़ा किया जाता है और दूसरों के सामने रखा जाता है।
एक अन्य अनुकूली स्लाइडर, जिसका नियंत्रण रेडियो बटन पर आधारित है। यह स्लाइडर विभिन्न उपकरणों पर कैसा दिखेगा यह देखने के लिए, आप या तो ब्राउज़र विंडो को स्वयं बदल सकते हैं, या स्लाइडर वाले पृष्ठ पर विभिन्न उपकरणों के लिए विशेष आइकन हैं, जिन पर क्लिक करके आप देखेंगे कि स्लाइडर कंप्यूटर पर कैसा दिखेगा , टैबलेट या स्मार्टफोन।
ऊपर प्रस्तुत सभी स्लाइडर्स के अलावा, मैं आपको एक और से खुश करना चाहता हूं। यह स्लाइडर छवि गैलरी बनाने के लिए बिल्कुल उपयुक्त है। आप शब्दों में नहीं बता सकते कि वह क्या करता है, इसलिए बेहतर होगा कि आप सब कुछ वीडियो में देखें:
