होने से ऐसी वेबसाइटें जो स्क्रीन की पूरी चौड़ाई लेती हैंहमने पाया कि कुछ तत्वों को एकीकृत किया जा सकता है जो बिक्री के लिए उत्पादों के पूरे नमूने को प्रदर्शित करने के लिए काम में आ सकते हैं या यात्राएं जो हमारे पास गर्मियों के लिए हो सकती हैं। हिंडोला या स्लाइडर्स उन वेब तत्वों में से एक हैं जो हमें अपने उत्पादों को नेत्रहीन तरीके से दिखाने की अनुमति देते हैं।
L सीएसएस में मुफ्त स्लाइडर, स्क्रॉलर या हिंडोला नीचे आप पाएंगे कि काम पर सभी प्रकार के उद्देश्यों के लिए एक अच्छा प्रदर्शनों की सूची तैयार करें, जिससे हम ग्राहक को अपना बजट स्वीकार करने से पहले दिखाने जा रहे हैं। यह एचटीएमएल और सीएसएस में क्षैतिज और ऊर्ध्वाधर दोनों स्वरूपों में जावास्क्रिप्ट के एक बिट के साथ स्लाइडर्स का संग्रह है। चलो ऐसा करते हैं ताकि आप उन्हें जल्दी से लागू करने के लिए कोड तक पहुंच सकें।
क्षैतिज हिंडोला
इस हिंडोला में एक होते हैं बहुत आकर्षक एनीमेशन जैसे कि हम एक पर्दा खींच रहे थे, सिर्फ प्रोफाइल के फोटो और आइकन के लिए ज़ूम आउट करने के लिए जिसे हम इस स्लाइडर में स्थापित करने जा रहे हैं। यह उन उपयोगकर्ताओं के प्रशंसापत्र के लिए एक आदर्श हिंडोला है जो वेब पर हमारे द्वारा बेचे जाने वाले उत्पादों से बहुत संतुष्ट हैं।
उत्तरदायी अनंत हिंडोला
यह स्लाइडर है विज्ञापन की तरह जो कभी-कभी देखा जा सकता है किनारों पर फ़ुटबॉल फ़ील्ड पर और क्षैतिज रूप से स्क्रॉल करने वाले विभिन्न विज्ञापन दिखा रहे हैं। यह लैंडिंग पृष्ठों के लिए आदर्श है, जिसमें ब्रांड साझेदारों और अन्य प्रकार के लोगो को दिखाने की आवश्यकता होती है।
प्रतिक्रियाशील हिंडोला
यह स्क्रॉल इसके React.js के लिए बाहर खड़ा है। जैसा कि हम एक निरंतर एनीमेशन में एक छवि से दूसरे में जाते हैं, उसी अनुपात में छवियों को प्रदर्शित करने के लिए उधार देता है। इस सरल सीएसएस के बारे में कहने के लिए थोड़ा अधिक है, लेकिन महान प्रभाव की अगर हम जानते हैं कि इसे वेब पर ठीक से कैसे लगाया जाए।
चिकना 3 डी स्लाइडर
एचटीएमएल, सीएसएस और जावास्क्रिप्ट से बना, यह 3 डी हिंडोला अपनी चिकनाई के लिए बाहर खड़ा है और महान दृश्य प्रभाव के साथ एक उछल एनीमेशन। तत्वों की एक श्रृंखला के साथ जो आपकी वेबसाइट पर इसे शामिल करने के लिए प्रत्येक कार्ड, एक काम और एक आंख को पकड़ने वाले हिंडोला की पहचान करते हैं।
स्वचालित अनंत हिंडोला
एक स्लाइडर, जो अपने नाम से चेतावनी देता है, स्वचालित रूप से प्रदर्शित होता है उपयोगकर्ता के बिना बातचीत करने के लिए कुछ ही समय में उसके साथ। इस हड़ताली हिंडोला को बनाने वाली विभिन्न छवियां संक्रमण के कारण दिखाई देती हैं जिसमें यह जादुई रूप से फीका पड़ जाता है।
हॉवर हिंडोला
होवर तत्व के साथ स्लाइडर बाईं से दाईं ओर चलता है, या इसके विपरीत, जैसा कि हम उस पर माउस पॉइंटर छोड़ते हैं। विभिन्न तस्वीरों के बीच स्थानांतरित करने के लिए एक चिकनी संक्रमण जो इस छवि स्लाइडर को बना सकता है।
मोबाइल हिंडोला
भी जिसे Carousel Material Design कहा जाता है, और सभी प्रकार के कार्ड के साथ वर्तमान प्रवृत्ति के साथ, यहाँ आप सीएसएस / एचटीएमएल में उनमें से एक बड़ी संख्या के साथ एक और लेख पा सकते हैं, यह Google द्वारा प्रकाशित डिज़ाइन भाषा से बना होने से बाकी से दूरी बनाता है। आप कार्ड पर लंबे समय तक दबाकर विभिन्न कार्डों को स्थानांतरित कर सकते हैं।
Instagram फ़ीड हिंडोला
आप इस स्लाइडर के पीछे के विचार को मिटा सकते हैं छवियों की एक पट्टी के द्वारा जो बढ़ाई जा सकती है उनमें से किसी एक पर क्लिक करके। महान प्रभाव का एक एनीमेशन, हालांकि यह एक विशिष्ट प्रकार की वेबसाइट के लिए निर्देशित है। इंस्टाग्राम पोस्ट एक slick.js हिंडोला के लिए ले लिया।
सरल सिंक्रनाइज़ हिंडोला
यह पिछले एक के साथ बहुत कुछ करना है, खासकर छवियों की पट्टी में, हालांकि स्लाइडर के साथ बातचीत बहुत अलग है बाएं से दाएं और इसके विपरीत पार्श्व इशारे के साथ इसे स्थानांतरित करके। फिर से हम slick.js अपनी बात कर रहे हैं। इसके महान प्रभाव के लिए प्रहार।
3 डी क्षैतिज हिंडोला
पूरी सूची पर सबसे दिलचस्प हिंडोला में से एक हमने प्रकाशित किया। के लिए खड़ा है CSS और HTML में आपके क्षैतिज स्लाइडर्स कि कल्पनात्मक रूप से अच्छी तरह से आगे बढ़ें। आपको केवल चार विभिन्नताओं के साथ उत्पन्न होने वाले विभिन्न प्रभावों को खोजने के लिए बक्से पर माउस पॉइंटर को छोड़ना होगा।
सीएसएस हिंडोला
एक के साथ सरल और महान दृश्य प्रभाव कार्ड की श्रृंखला जो मोड़ लेती है मोर्चे पर। प्रभाव 3 डी में है, इसलिए यह उन स्लाइडर्स में से एक है जो बहुत अधिक ध्यान आकर्षित करते हैं, विशेष रूप से न्यूनतम प्रतिक्षेप प्रभाव के कारण जो उसी के निर्माता के हिस्से पर प्रतिभा दिखाता है।
Ambilight बूटस्ट्रैप हिंडोला
बहुत प्रभाव के साथ एक सरल स्लाइडर जो ज्यादा समय तक खड़ा नहीं होता है। में से एक है उन सरल स्लाइडर्स कि हम आम तौर पर तलाश करते हैं और वह बहुत अधिक धूमधाम के बिना एक होने का एहसास देता है, लेकिन यह पूरी तरह से अपने कार्य को पूरा करता है।
हिंडोला टीम
यदि आप उस संपादकीय टीम का परिचय देना चाहते हैं जो आपके पास ब्लॉग पर है, यह स्लाइडर अपनी भूमिका में एकदम सही है। यह कितना सरल है, इसके लिए पिछले एक के समान अच्छा है। यह टीम की प्रत्येक तस्वीर को घर में रखने के लिए हीरे के उपयोग के लिए खड़ा है। इसमें ऑटोमैटिक प्लेबैक है।
हिंडोला क्यूब
स्लाइडर जो एक घन होने के लिए बाहर खड़ा है जिसमें प्रत्येक चेहरा छवियों में से एक है या तस्वीरें जिन्हें हम एक वेबसाइट पर प्रदर्शित करना चाहते हैं। आपको उन्हें स्क्रॉल करने के लिए उनमें से प्रत्येक पर क्लिक करना होगा और यह पता लगाना होगा कि आपको किस सामग्री का इंतजार है।
हिंडोला तीर कुंजी
एक स्लाइडर जिसमें इंटरैक्शन होता है तीर कुंजी का उपयोग कर। बहुत अधिक धूमधाम के बिना सरल जो सीधे दूसरे प्रकार की बातचीत में जाता है, वह जो वर्षों पहले से लगता है। एक विशिष्ट उपयोग के लिए।
ऊर्ध्वाधर हिंडोला
एक महान दृश्य प्रभाव के साथ एक स्लाइडर स्वचालित रूप से एक सतत ऊर्ध्वाधर एनीमेशन में खेलता है जो गोल कोनों के साथ अपने कार्ड के लिए बाहर खड़ा है। बहुत ही वर्तमान और उनमें से एक है जो इस पूरी सूची में से अपने दम पर खड़ा है।
शुद्ध सीएसएस हिंडोला
यह हिंडोला एक होने के लिए बाहर खड़ा है साइड मेनू जिससे हम जा सकते हैं इसके प्रत्येक विकल्प पर क्लिक करें। जानकारी एक अच्छी तरह से प्राप्त किए गए रिबाउंड प्रभाव के साथ दिखाई देती है जो कि कही गई तुलना में बहुत अधिक है।
ऊर्ध्वाधर हिंडोला प्रतिक्रिया
के समान अपनी ऊर्ध्वाधरता के लिए पिछले, हालांकि यह स्लाइडर अपने प्रत्येक टैब की छवियों को दिखाने के लिए पृष्ठ की पूरी चौड़ाई लेने में सक्षम है। अपने बड़े प्रारूप के लिए दिलचस्प और सीएसएस संक्रमण का उपयोग स्लाइड के बीच स्लाइड करने के लिए।
3 डी स्प्लिट हिंडोला
3 डी में घूमने वाले स्लाइडर्स पैटर्न के साथ महान दृश्य प्रभाव एक बहुत ही आकर्षक एनीमेशन। आप उनमें से प्रत्येक के लिए डॉट्स के साथ बाईं ओर मेनू से प्रत्येक विकल्प का चयन कर सकते हैं। यह कितना रचनात्मक है इसके लिए सूची में सर्वश्रेष्ठ में से एक।
सुप्रभात, मैं अपनी साइट पर Pure CSS Carousel का उपयोग करना चाहता हूं, लेकिन यह केवल एक स्थिति में स्थित है, मैं इसे उस स्थिति में कैसे बना सकता हूं जिसे मैं अपने पृष्ठ के भीतर चाहता हूं।
कृपया इसमें आपकी मदद करें। बहुत बहुत धन्यवाद
मैं अपनी वेबसाइट के मोबाइल संस्करण पर हॉवर कारूसल को अच्छी तरह से कैसे प्रदर्शित कर सकता हूं?
बहुत बढ़िया, उन्होंने क्या अच्छा काम किया!
हैलो, कैरिज हाउस बहुत अच्छे हैं, लेकिन जैसे ही मैं इसे अपलोड करता हूं, मैं इसे कॉपी और पेस्ट करता हूं, जावास्क्रिप्ट मुझे var max = $ ('# c> li) .lenght… के कारण एक त्रुटि देता है। आप क्या सुझाव दे रहे हैं