5 नि शुल्क छवि तुलना स्लाइडर लिपियों
ओवरलाइड स्लाइडर्स आपको दो छवियों के बीच तुलना करने की अनुमति देते हैं, आमतौर पर एक पहले के बाद की तरह, दो छवियों को एक-दूसरे पर आरोपित करने के साथ। एक स्लाइडर जिसे हेरफेर किया जा सकता है, उपयोगकर्ता द्वारा पहले की छवि के कम दिखाने के लिए और बाद की छवि के अधिक के लिए खींचा जा सकता है, और इसके विपरीत.
यह कुछ परिदृश्यों के लिए सही तरीका है जैसे कि मंगल के वायुमंडल के कठोर प्रभावों को देखना या शहर के परिदृश्य एक सदी के आधे से अधिक में कैसे बदलते हैं.
डिजाइनरों के लिए, यह एक तकनीक या दृष्टिकोण की मूल छवि में परिवर्तन की मात्रा पर प्रतिबिंबित करने का एक शानदार तरीका है। विभिन्न JS लाइब्रेरीज़ हैं जिनका आप तुलनात्मक उद्देश्यों के लिए उपयोग कर सकते हैं। यहाँ उनमें से 5 हैं.
Twentytwenty
Twentytwenty दो चित्रों के बीच अंतर को नोट करना आसान बनाने के लिए दृश्य उपकरण है। यह उपकरण काम करने के लिए jQuery और jquery.event.move का उपयोग करता है। इसका उपयोग करना बहुत आसान है, बस एक कंटेनर में दो छवियों को स्टैक करें, फिर कॉल करें twentytwenty (); कंटेनर के लिए.
फिर:
$ ( "# कंटेनर") twentytwenty ()।;
ट्वेंटीवेंटी उत्तरदायी है और सभी उपकरणों के लिए काम करता है, और यदि आप फाउंडेशन फ्रेमवर्क का उपयोग करते हैं, तो यह बॉक्स से बाहर काम करेगा.
मिलाना
मिलाना आपको मीडिया के दो टुकड़ों (फ़ोटो या GIF) की तुलना करने में मदद करता है और समय के साथ छवियों के बीच परिवर्तन को उजागर करना आपके लिए आसान बनाता है। इस प्लगइन का उपयोग करना आसान है और सभी उपकरणों पर काम करता है। बस दो छवियां प्रदान करें फिर उपलब्ध विकल्पों के साथ प्लगइन को कॉल करें.
विकल्पों पर, आप स्लाइडर प्रारंभ स्थिति सेट कर सकते हैं, इसे लंबवत या क्षैतिज सेट कर सकते हैं, लेबल और क्रेडिट, एनीमेशन और बहुत कुछ जोड़ सकते हैं.
नीचे एक डेमो आज़माएँ:
imgSlider
imgSlider छवि तुलना स्लाइडर बनाने के लिए एक सरल jQuery प्लगइन है। उपयोग सरल और आसान है: अपने JS और CSS को शामिल करने के बाद, छवियों को div के साथ लपेटें बाएं के लिए वर्ग से पहले छवि, और सही के लिए वर्ग बाद छवि, फिर इसे कॉल करके सक्रिय करें .स्लाइडर ();. प्लगइन के विकल्पों में स्लाइडर की प्रारंभिक स्थिति सेट करना, और स्लाइडर पर निर्देश जोड़ना / दिखाना शामिल है.
प्लग इन करें:
$ ( '। स्लाइडर') स्लाइडर ()।
Cocoen
Cocoen jQuery- टच इवेंट के उपयोग के साथ स्पर्श सक्षम करता है। HTML संरचना के समान लागू होना आसान है Twentytwenty लगाना। स्क्रिप्ट स्टैक पर, jQuery के अलावा आपको इस प्लगइन के साथ jQuery टच इवेंट लाइब्रेरी को शामिल करना होगा.
$ (दस्तावेज़)। पहले से ही (फ़ंक्शन () $ ('। कोकोनी')। कोकोनी (););
नीचे एक डेमो आज़माएँ:
छवि तुलना स्लाइडर
कोडहाउस ने ड्रैग इवेंट को संभालने और मोबाइल सपोर्ट को जोड़ने के लिए CSS3, jQuery और कुछ स्क्रिप्ट के साथ एक छवि तुलना स्लाइडर का डेमो बनाया। आप इस प्लगइन का उपयोग करने की पूरी व्याख्या और निर्देशों का पालन कर सकते हैं और यहां डेमो देख सकते हैं.
नीचे एक डेमो आज़माएँ:
यहाँ 3 और हैं:
केटो - अन्य प्लगइन्स निर्भरता के रूप में jQuery की जरूरत है लेकिन केटो काम करने के लिए कोई निर्भरता की आवश्यकता नहीं है, जिससे यह छवि तुलना स्लाइडर के लिए एक अधिक हल्का पुस्तकालय बना। उपयोग आसान है, बस कैटो के सीएसएस और जेएस लाइब्रेरी शामिल करें और इसकी HTML संरचना का पालन करें.
आपके स्लाइडर पर लागू करने के लिए विकल्प उपलब्ध हैं, जिसमें टूलटिप जोड़ना, स्लाइडर दिशा बदलना, यहां तक कि सीपिया और ग्रेस्केल जैसे फ़िल्टर प्रभाव को जोड़ना शामिल है। हालाँकि आपको ध्यान देना चाहिए कि वर्तमान में केवल काटो के पास वेबकिट के लिए समर्थन है.
पहले बादमे - यह हल्का, पूरी तरह उत्तरदायी है, और किसी भी लेआउट और आकार पर काम करता है। आप कोडपेन पर लाइव डेमो देख सकते हैं.
एचटीएमएल 5 वीडियो तुलना स्लाइडर - जब अन्य डेवलपर छवियों के लिए तुलना स्लाइडर बनाने की कोशिश करते हैं, तो डडली स्टोरी स्लाइडर को वीडियो पर लागू करते हैं। काम करने के लिए, वह jQuery और कोड की कुछ पंक्तियों का उपयोग करता है। कोडपेन पर डेमो देखें कार्रवाई देखने के लिए.
