पहले/बाद स्लाइडर जनरेटर

यह कैसे काम करता है

“बाद” वाली इमेज बैकग्राउंड में पूरे साइज़ में दिखाई जाती है, जबकि “पहले” वाली इमेज उसके ऊपर एक ऐसे कंटेनर में रखी जाती है जिसकी चौड़ाई एक अदृश्य स्लाइडर से नियंत्रित होती है: इस स्लाइडर को खींचने पर नीचे की इमेज धीरे-धीरे दिखने लगती है। ऊपर का प्रीव्यू सीधे टूल में काम करता है, और जनरेट किया गया कोड इसी सिद्धांत को बिना किसी बाहरी JavaScript डिपेंडेंसी के शुद्ध HTML/CSS में दोहराता है।

जनरेट किया गया कोड अपनी साइट में कैसे जोड़ूँ?

जनरेट किया गया HTML कोड कॉपी करें और दोनों src एट्रिब्यूट को अपनी इमेज के असली पाथ (आपके सर्वर पर होस्ट की गई) या उनके पूरे base64 एन्कोडेड वर्ज़न से बदल दें; कोड में शामिल नेटिव input[type=range] स्लाइडर बिना किसी अतिरिक्त लाइब्रेरी के इंटरैक्टिविटी संभालता है।

क्या मैं “पहले” और “बाद” के लेबल बदल सकता/सकती हूँ?

जी हाँ, लेबल फ़ील्ड से आप स्लाइडर के हर कोने पर दिखने वाला टेक्स्ट बदल सकते हैं (जैसे “काम से पहले” / “काम के बाद”, या तारीख़ें), प्रीव्यू और जनरेट किए गए कोड, दोनों में।

प्रीव्यू और कोड जनरेशन पूरी तरह आपके ब्राउज़र में होते हैं: आपकी इमेज कभी किसी सर्वर पर नहीं भेजी जातीं।