हम सीएसएस और HTML कोड के एक दौर के साथ जारी रखते हैं जिसे हमारी वेबसाइट पर लागू किया जा सकता है ताकि यह उस विशेष स्पर्श को दे सके जिससे इसे बाकी हिस्सों से अलग किया जा सके। धन्यवाद + सी नियंत्रण प्लस + वी नियंत्रण हम कर सकते हैं हमारे हाथ कोड में है जो वेब को तैयार कर देगा परीक्षण में दिन या सप्ताह बिताने के बाद विकास में प्रकाशित होना।
अब HTML और CSS में 27 स्लाइडर्स के लिए समय है जो हमें उस स्थान को तैयार करने की अनुमति देगा जिसमें हम आमतौर पर कुछ पिक्सल में बहुत सारी सामग्री को एकीकृत करते हैं। ये स्लाइडर्स कार्ड से लेकर, तुलनात्मक, पूर्ण स्क्रीन, उत्तरदायी और सबसे सरल, लेकिन एक ही समय में भी बहुत सुरुचिपूर्ण। हम 27 स्लाइडर्स के साथ जा रहे हैं जो किसी को भी उदासीन नहीं छोड़ेंगे, विशेष रूप से ग्राहक या उपयोगकर्ता जो आपकी वेबसाइट से गुजरते हैं सामग्री पढ़ने, उत्पाद खरीदने या बस तुलनात्मक स्लाइडर का उपयोग करने से पहले और बाद की छवि की तुलना करने के लिए।
कार्ड पर स्क्रीन
एचटीएमएल और सीएसएस में एक बहुत ही सहज ज्ञान युक्त स्लाइडर जो व्यवहार करता है अपनी वेबसाइट पर कार्ड की एक श्रृंखला लें कि एक के बाद एक महान शैली के साथ एक एनीमेशन के साथ पारित कर रहे हैं। यह वास्तव में एनीमेशन और पृष्ठभूमि ढाल है जो इस HTML और सीएसएस कोड को सूक्ष्म स्पर्श देता है जो कि जावास्क्रिप्ट के एक बिट के लिए भी खड़ा है। एलिगेंट इस क्वालिटी स्लाइडर को चित्रित करने वाला शब्द है।
सूचना कार्ड स्लाइडर
यह जानकारी कार्ड स्लाइडर HTML, सीएसएस और जावास्क्रिप्ट में भी कोड है। बल्कि इसके बारे में है कार्ड की एक श्रृंखला यह एनीमेशन के लिए बहुत ध्यान आकर्षित नहीं करता है, हालांकि इसकी सादगी इसकी सबसे बड़ी कीमत है। इस सूची से विचार करने के लिए एक और स्लाइडर।
तुलनात्मक छवि स्लाइडर
यह स्लाइडर है बड़ी उपयोगिता की और निश्चित रूप से आपने इसे कई वेबसाइटों पर देखा है, जहां पहले और बाद की तस्वीरों की तुलना एक ऊर्ध्वाधर बार से की जाती है जो क्षैतिज रूप से स्लाइड करता है। यह तुलना के लिए एक बड़ी मदद है, इसलिए हमने इसे स्लाइडर्स की सूची में आवश्यक में से एक बना दिया।
जावास्क्रिप्ट के बिना तुलनात्मक स्लाइडर
इस स्लाइडर की महान गुणवत्ता यह है कि जावास्क्रिप्ट के बिना आता है, इसलिए आपको केवल दूसरी तुलना करने के लिए अपनी वेबसाइट पर CSS और HTML कोड को लागू करना होगा। छवि की तुलना देखने के लिए आपको इसे एक तरफ से दूसरी तरफ स्लाइड करने के लिए छवि के निचले भाग में ब्लैक बॉक्स का उपयोग करना होगा। पिछले एक के रूप में सहज नहीं है, लेकिन जावास्क्रिप्ट के बिना बहुत उपयोगी है।
तीन-परत तुलनात्मक छवि स्लाइडर
इसका नाम यह सब कहता है, एक छवि स्लाइडर जो आपको एक बार में तीन तक तुलना करने की अनुमति देता है। उदाहरण दिया गया है, प्रोफ़ाइल में सिर को देखने के लिए एक है, मांसपेशियों को दिखाने के लिए एक और हड्डियों को देखने के लिए एक और स्लाइडर है। यह अपने ऑपरेशन के लिए HTML, CSS और JavaScript का उपयोग करता है।
वेनिला जेएस इमेज स्लाइडर
एक और तुलनात्मक छवि स्लाइडर एक बड़े बटन के साथ जिसके साथ छवि को एक तरफ से दूसरी तरफ स्लाइड करना है। कम से कम जावास्क्रिप्ट और एक शानदार दृश्य के साथ न्यूनतम। छवियों की तुलना करने के लिए सबसे हड़ताली में से एक।
विभाजित स्क्रीन तिरछे
यह तुलनात्मक छवि स्लाइडर यह Envato Tuts द्वारा बनाया गया है और यह भेद है कि दो छवियों की तुलना करते समय स्लाइडर को अन्य प्रकार की संवेदनाओं को उत्पन्न करने के लिए तिरछे स्थान पर स्थित किया जाता है। यह एक उच्च गुणवत्ता तुलनात्मक स्लाइडर होने के लिए जावास्क्रिप्ट, सीएसएस और HTML का उपयोग करता है।
पूर्ण स्क्रीन स्लाइडर
हमें पूर्ण स्क्रीन स्लाइडर्स का हिस्सा मिला एक संक्रमण द्वारा विशेषता स्लाइडर संक्रमण महान प्रभाव के एक एनीमेशन द्वारा किया गया। यदि आप पूर्ण स्क्रीन में चित्र दिखाने की योजना बनाते हैं और आप बहुत ध्यान से गुजर रहे हैं, तो जावास्क्रिप्ट, सीएसएस और एचटीएमएल में कोड।
लंबन के साथ क्षैतिज स्लाइडर
के लिए लंबन के प्रशंसक इस स्लाइडर को प्रभावित करते हैं Swiper.js, HTML और CSS के साथ। प्रत्येक पक्ष पर स्थित दो बटन के साथ स्लाइड करने में सक्षम होने के अलावा, दाईं ओर हम पूर्ण हिंडोला की सभी छवियों को छोटा करते हैं। एक अलग और उच्च-गुणवत्ता वाला दृश्य स्लाइडर जो हमारी वेबसाइट पर जाने वाले किसी को भी उदासीन नहीं छोड़ेगा।
चिकना 3 डी परिप्रेक्ष्य स्लाइडर
एक उत्तरदायी स्लाइडर जो सूचक आंदोलनों का पालन करें चूहा। यह परिप्रेक्ष्य के एक महान प्रभाव को पैदा करने में सक्षम है जो आगंतुक में मिश्रित भावनाओं को जन्म दे सकता है। यदि आप जानते हैं कि इसका सही उपयोग कैसे किया जाए, तो आप हमारी वेबसाइट पर उस मूल और सूक्ष्म स्पर्श को दे सकते हैं। जावास्क्रिप्ट, सीएसएस और HTML कोड गायब नहीं हैं।
हीरो फुल स्क्रीन स्लाइडर
HTML, CSS और जावास्क्रिप्ट में एक पूर्ण स्क्रीन हीरो छवि स्लाइडर। लीजिये हर एनीमेशन में उछाल प्रभाव इससे यह पता चलता है कि सामान्य तौर पर हम बाकी की तरह गुणवत्ता पूर्ण स्क्रीन स्लाइडर का सामना कर रहे हैं।
सीमाओं के साथ VELO.JS स्लाइडर
एक बस एक शानदार संक्रमण एनीमेशन के साथ एक पूर्ण स्क्रीन स्लाइडर के रूप में मुख्य आकर्षण। हम अनुशंसा करते हैं कि आप इसे वेब पर लागू करने के बारे में सोचने के लिए ऑपरेशन में इसे देखने जाएं। वेग प्रभाव का उपयोग करें तीर के बटन का उपयोग करने वाले उस एनीमेशन को सुधारने के लिए, नेविगेशन में एक क्लिक और यहां तक कि स्क्रॉलिंग, बस परफेक्ट।
थंबनेल के साथ उत्तरदायी सीएसएस ऊर्ध्वाधर स्लाइडर
हम स्लाइडर्स पर आगे बढ़ते हैं मोबाइल के लिए उत्तरदायी सीएसएस इस तरह महान गुणवत्ता। आपके पास दाईं ओर थंबनेल की एक श्रृंखला होगी जिसे दबाने पर ऊर्ध्वाधर गिरावट में एक एनीमेशन शुरू हो जाएगा। महान प्रभाव जो इस सूची के सर्वश्रेष्ठ में से एक स्लाइडर को छोड़ने के लिए केवल सीएसएस का उपयोग करता है।
छवि स्लाइडर flexbox
अन्य जावास्क्रिप्ट के साथ बनाया उत्तरदायी छवि स्लाइडर और यह काफी सुंदर होने के लिए सरल से अधिक है। इससे अधिक कुछ नहीं के साथ लघु, सरल और न्यूनतावादी। फ्लेक्सबॉक्स स्लाइडर्स की इस सूची में इसका स्थान है।
एसवीजी फिल्टर के साथ मोशन ब्लर
एक प्रयोग जो प्रभाव को अनुकरण करता है हर बार एक स्लाइड में गति धुंधला सक्रिय होता है। इसमें एसवीजी गॉसियन ब्लर फिल्टर और कुछ सीएसएस एनीमेशन कुंजी का उपयोग किया गया है। जावास्क्रिप्ट में प्रयुक्त कोड शुद्ध रूप से दिए गए उदाहरण और स्लाइडर की कार्यक्षमता के लिए है।
एनिमेटेड स्लाइडर
एक एनिमेटेड स्लाइडर जावास्क्रिप्ट, HTML और सीएसएस के साथ उत्तरदायी। हमारे पास दाईं ओर तीर हैं जो हमें एक सुंदर और संक्षिप्त एनीमेशन के साथ उत्पन्न होने वाली छवियों के माध्यम से जाने की अनुमति देते हैं। प्रत्येक स्लाइड में एक महान प्रभाव हासिल किया जाता है ताकि खुद को बाहर खड़ा किया जा सके। एनिमेशन में बहुत वर्तमान।
एसवीजी पैटर्न के साथ छवि स्लाइडर
उन प्रयोगों में से एक है जो करने की कोशिश करता है svg पैटर्न ले एक सीएसएस स्लाइडर के लिए कुछ मुखौटा चित्र बनाने के लिए। यह एक बेहतरीन फिनिशिंग के साथ बहुत ही शानदार ब्लर इफेक्ट बनाता है। हमारी वेबसाइट के आगंतुक में अच्छी भावनाओं को भड़काने के लिए उन स्लाइडर्स में से एक और।
सरल परत स्लाइडर
एक स्लाइडर एक से अधिक के साथ प्रतिष्ठित एनीमेशन हर बार जब हम एक नई छवि को स्लाइड करने के लिए आइकन पर क्लिक करते हैं तो वह लहर प्रभाव प्रदान करता है। HTML, CSS और JavaScript में यह एक और इमेज स्लाइडर बन जाता है।
शुद्ध सीएसएस स्लाइडर
सबसे सरल स्लाइडर्स में से एक और शुद्ध सीएसएस है। इसके फायदे में से एक नीचे डॉट्स की एक श्रृंखला छोड़ दी जो कि उन छवियों में से प्रत्येक तक पहुंचने के लिए बटन के रूप में काम करेगा जो किसी विशेष एनीमेशन के बिना हमारे सामने से गुजरेंगे।
कप केक केवल सीएसएस स्लाइडर
El सूची में सबसे प्यारी स्लाइडर और यह केवल CSS और HTML में है। यह पूरी सूची के सबसे विशेष में से एक है कपकेक के विभिन्न रूपों के दाईं ओर। एक पर क्लिक करें और एक कप केक एक अद्भुत एनीमेशन के साथ दिखाई देता है जो एक महान उछाल प्रभाव में समाप्त होता है। एक शक के बिना सबसे अच्छा है।
स्लाइडर एनीमेशन प्रभाव
एनीमेशन में सबसे सुरुचिपूर्ण स्लाइडर्स में से एक और क्या पहले बदलाव पर हमें विस्मित करने का प्रबंधन करता है। एनीमेशन के उठने के पहले क्षण से, इसका HTML, CSS और JavaScript कोड हमें आश्चर्यचकित करता है। अतिसूक्ष्म स्पर्श में सर्वश्रेष्ठ में से एक यह देता है।
स्लाइडर का टुकड़ा
Un संक्रमण स्लाइडर जो एक साधारण ऐड क्लास का उपयोग करता है और इस सूची में पसंदीदा में से एक बनने के लिए बहुत चिकनी एनिमेशन की विशेषता है। यदि आप वेब के मोबाइल संस्करण में खुद को अलग करना चाहते हैं, तो यह आवश्यक चीजों में से एक है। नेत्रहीन महान।
स्लाइडर लंबल न्यूयॉर्क
इसके सबसे बड़े फायदों में से एक है सीएसएस में लंबन स्लाइडर यह है कि यह एक बहुत अनुकूलित किया जा सकता है। इसका मतलब है कि आप फ़ॉन्ट, उसके आकार, उसके रंग और एनीमेशन की गति को बदल सकते हैं। एक नया जावास्क्रिप्ट सरणी स्ट्रिंग में प्रत्येक शहर का पहला अक्षर एक नई स्लाइड पर दिखाई देता है। इस पोस्ट के मूल्यवान स्लाइडर में से एक।
स्लाइडर पॉपआउट
एक साथ यह स्लाइडर प्रस्तुत किया गया है जिसमें छवि का प्रत्येक भाग प्रत्येक स्लाइड के साथ बाहर आता है। बहुत रचनात्मक और अलग है जो स्लाइडर्स की सूची में दिखाई देता है और जो अपनी जगह पर खड़ा है।
रिपल इफेक्ट के साथ स्लाइडर
Un महान प्रभाव पूर्ण स्क्रीन स्लाइडर सपाट रंगों के साथ इसका सारा रस प्राप्त करने के लिए। जावास्क्रिप्ट, HTML और सीएसएस एक और स्लाइडर के लिए एक आंख को पकड़ने प्रभाव के साथ।
छवि पूर्वावलोकन के साथ स्लाइडर
स्लाइडर अगली स्लाइड्स के पूर्वावलोकन के साथ GSAP कि उपयोगकर्ता के लिए प्रस्तुत किया जाएगा। एक फैशन या डिजाइन वेबसाइट पर मॉडलिंग के लिए बिल्कुल सही।
स्लाइडर्स संक्रमण
हम सूची को एक के साथ समाप्त करते हैं बम-प्रभाव वाले उच्च गुणवत्ता वाले स्लाइडर और एनिमेशन की एक श्रृंखला जो हमारी वेबसाइट पर उस विशेष स्पर्श को प्राप्त करती है। लंबन प्रभाव को सक्रिय किया जा सकता है।
यह याद मत करो एक और सीएसएस कोड सूची बटन के लिए।
यह पोस्ट बहुत अच्छी है, साझा करने के लिए बहुत-बहुत धन्यवाद। पसंदीदा सीधे नॉन-स्टॉप पर जाता है।
नमस्कार साथी।