१ sl स्लाइडर वा carousels CSS र HTML तपाईंको वेबसाइट को लागी

नि: शुल्क स्लाइडर

भएको वेबसाइटहरू जुन स्क्रिनको पूरा चौडाइ लिन्छन्हामीले पत्ता लगायौं कि केहि तत्वहरू एकीकृत गर्न सकिन्छ जुन बिक्रीको लागि उत्पादनहरूको सम्पूर्ण नमूना प्रदर्शन गर्न काममा आउँदछ वा यात्राहरू जुन हामी गर्मीको लागि प्रस्तावमा राख्न सक्छौं। Carousels वा स्लाइडर ती वेब तत्वहरू मध्ये एक हो जसले हामीलाई हाम्रा उत्पादनहरू दृश्यात्मक देखाउँदछ।

को नि: शुल्क स्लाइडर, स्क्रोलर वा CSS मा carousels तपाईंले तल पाउनुहुनेछ, तिनीहरूले काममा सबै प्रकारका उद्देश्यहरूको लागि राम्रो भण्डार बनाउँदछन् जुन हामीले ग्राहकलाई उनीहरूले हाम्रो बजेट स्वीकार गर्नु अघि देखाउँनेछौं। यो एचटीएमएल र CSS मा जाभास्क्रिप्टको एक बिट दुबै क्षैतिज र ठाडो ढाँचामा स्लाइडरहरूको संग्रह हो। हामी यो गर्न गइरहेका छौं ताकि तपाईं कोडहरू छिटो कार्यान्वयन गर्न सक्नुहुनेछ।

क्षैतिज हिंडोला

उत्तरदायी

यो हिंडोलामा एक हुन्छ धेरै आकर्षक एनिमेसन मानौं यदि हामी पर्दा कोर्दै थियौं, केवल फोटोहरू र प्रोफाइलहरूका आइकनहरूको लागि जुम आउट गर्न जुन हामीले यो स्लाइडरमा स्थापना गर्न लाग्यौं। यो प्रयोगकर्ताहरूबाट प्रशंसापत्रको लागि उत्तम क्यारोसेल हो जुन हामी वेबमा बेच्ने उत्पादनहरूसँग धेरै सन्तुष्ट छन्।

कपकेक स्लाइडर
सम्बन्धित लेख:
२ HTML HTML र CSS स्लाइडर तपाइँको वेबसाइटलाई त्यो विशेष टच दिन

उत्तरदायी अनन्त क्यारोसेल

आत्म प्रजनन

यो स्लाइडर हो विज्ञापन जस्तो कि कहिलेकाँही देख्न सकिन्छ पक्षमा फुटबल फिल्डमा र विभिन्न विज्ञापनहरू देखाउँदै जुन तेर्सो रूपमा स्क्रोल गर्दछ। यो अवतरण पृष्ठहरूको लागि आदर्श हो जुन ब्रान्ड पार्टनरहरू र अन्य प्रकारका लोगोहरू देखाउन आवश्यक छ।

प्रतिक्रिया Carousel

थ्रीडी क्यारोसेल

यो स्क्रोल यसको React.js को लागी खडा छ। यसले एक अनुपेक्षित आकारमा छविहरू प्रदर्शन गर्न उधार दिन्छ किनकि हामी एक छविबाट अर्को एनिमेसनमा अर्को छविमा जान्छौं। थोरै बढी यो पर्याप्त सरल सीएसएसको बारेमा भन्न को लागी, तर महान प्रभाव को यदि हामी यो वेबमा कसरी राम्रोसँग राख्ने बारे जान्छौं भने।

चिकना थ्रीडी स्लाइडर

थ्रीडी क्यारोसेल

एचटीएमएल, सीएसएस र जाभास्क्रिप्टको रचना, यो थ्रीडी कारउजेल यसको सहजताको लागि बाहिर खडा छ एक अत्यधिक दृश्य उछाल एनिमेसन। प्रत्येक कार्ड, एउटा काम र एक आँखा-कैचिंग क्यारोसेल पहिचान गर्ने तत्वहरूको श्रृंखलाको साथ यसलाई तपाइँको वेबसाइटमा समावेश गर्न।

सम्बन्धित लेख:
J 46 जाभास्क्रिप्ट स्लाइडर र स्क्रोलरहरू

स्वचालित अनन्त क्यारोसेल

अनन्त क्यारोसेल

एउटा स्लाइडर जुन यसको आफ्नै नामले चेतावनी दिन्छ, स्वचालित रूपमा प्रदर्शित हुन्छ प्रयोगकर्ता अन्तर्क्रिया बिना उहाँसँग कुनै समय हुनुहुन्न। विभिन्न छविहरू जुन यस हडताल काराउजेल बनाउँछन् संक्रमणको कारण देखा पर्दछ जुन यसले जादुई ढ f्गले ढल्छ।

होवर क्यारोसेल

होवर क्यारोसेल

यो होभर तत्वको साथ स्लाइडर बायाँबाट दायाँ सर्छ, वा यसको विपरित, हामी माथि माउस सूचक छोड्दा। यस तस्विर स्लाइडर रचना गर्न सक्ने बिभिन्न तस्बिरहरूका बीच सर्नको लागि सहज संक्रमण।

मोबाइल क्यारोसेल

मोबाइल हिंडोला

साथै Carousel सामग्री डिजाइन भनिन्छ, र सबै प्रकारको कार्डहरूको साथ हालको चलनको साथ, यहाँ तपाईं अर्को लेख फेला पार्न सक्नुहुनेछ उनीहरूको ठूलो संख्याको साथ CSS / HTML मा, यो Google बाट प्रकाशित डिजाइन भाषाको रचना द्वारा बाँकीबाट टाढा छ। कार्डमा लामो प्रेस गरेर तपाईं बिभिन्न कार्डहरू सार्न सक्नुहुनेछ।

इन्स्टाग्राम फिड क्यारोसेल

इन्स्टाग्राम

तपाइँ यस स्लाइडर पछाडि विचार क्र्यास गर्न सक्नुहुन्छ जुन बाहिर खडा हुन्छ छविहरूको स्ट्रिप द्वारा जुन विस्तार गर्न सकिन्छ ती मध्ये कुनै एकमा क्लिक गरेर। महान प्रभावको एनिमेसन, यद्यपि यो वेबसाइटको एक विशेष प्रकारको लागि निर्देशित छ। इन्स्टाग्राम पोष्टहरू एक slick.js carousel मा लगियो।

साधारण सिnch्क्रोनाइजेसन हिंडोला

साधारण हिंडोला

यसको अघिल्लोसँग धेरै कुरा गर्नुपर्दछ, विशेष गरी छविहरूको स्ट्रिपमा, यद्यपि स्लाइडरको अन्तरक्रिया धेरै फरक छ बायाँबाट दायाँ र यसको विपरित पार्श्व इशाराको साथ यसलाई सार्दै। फेरी हामीसँग यसको चीज गरिरहेको slick.js छ। यसको ठूलो प्रभावको लागि हड्ताल गर्दै।

3D क्षैतिज हिंडोला

थ्रीडी होराइन्टल क्यारोसेल

हामीले प्रकाशित गरेको सम्पूर्ण सूचीमा सब भन्दा चाखलाग्दो carousels मध्ये एक को लागी खडा छ CSS र HTML मा तपाईंको तेर्सो स्लाइडरहरू त्यो अद्भुत तरिकाले सार्न। तपाईले बाकसमाथि माउस सूचक मात्र छोड्नु पर्छ बिभिन्न प्रभावहरू पाउन जुन चार भिन्नताका साथ उत्पादन गर्न सकिन्छ।

CSS Carousel

CSS थ्रीडी

एक संग सरल र उत्कृष्ट दृश्य प्रभाव कार्डहरूको श्रृंखला जुन मोड लिन्छ अगाडि प्रभाव थ्रीडीमा छ, त्यसैले यो ती स्लाइडरहरू मध्ये एक हो जसले धेरै ध्यान आकर्षण गर्दछ, विशेष गरी न्यूनतम रिवाउन्ड प्रभावको कारणले उही सिर्जनाकर्ताको पक्षमा प्रतिभा देखाउँदछ।

एम्बिलाईट बूटस्ट्र्याप क्यारोसेल

बुटस्ट्र्याप क्यारोसेल

ठूलो प्रभावको साथ एक सरल स्लाइडर जुन धेरैको लागि बाहिर देखिँदैन। मध्ये एक हो ती साधारण स्लाइडरहरू जुन हामी सामान्यतया हेर्छौं र त्यसले ठूलो धूमधाम बिना एक भएको महसुस गर्दछ, तर त्यसले पूर्ण रूपमा यसको कार्य पूरा गर्दछ।

Carousel टीम

Carousel टोली

यदि तपाईं सम्पादकीय टीम परिचय गर्न चाहानुहुन्छ जुन तपाईंसँग ब्लगमा छ, यो स्लाइडर यसको भूमिकामा उत्तम छ। पहिलेको भन्दा राम्रो जस्तो कती सरल छ। यो टीमको प्रत्येक फोटो राख्नका लागि हीराको प्रयोगको लागि खडा छ। यो स्वचालित प्लेब्याक छ।

क्यारोसेल घन

थ्रीडी घन

स्लाइडर जुन एक क्यूब हुनको लागि बाहिर खडा छ प्रत्येक अनुहार छविहरूको एक हो वा फोटोग्राफहरू जुन हामी वेबसाइटमा प्रदर्शन गर्न चाहन्छौं। तपाईंले तिनीहरूलाई प्रत्येकमा क्लिक गर्न को लागी स्क्रोल गर्नुहोस् र पत्ता लगाउनुहोस् कि कुन सामग्री तपाईंलाई पर्खिरहेको छ।

Carousel तीर कुञ्जीहरू

CSS कुञ्जीहरू

एक स्लाइडर जसमा अन्तर्क्रिया हुँदैछ एरो कुञ्जीहरू प्रयोग गर्दै। धेरै धूमधाम बिना सरल जुन अर्को प्रकारको अन्तर्क्रियामा सीधा जान्छ, जुन एक पहिले पहिले जस्तो देखिन्छ। विशिष्ट प्रयोगको लागि।

ठाडो carousels

ठाडो हिंडोला

एक महान दृश्य प्रभावको साथ एक स्लाइडर स्वचालित रूपमा एक निरन्तर ठाडो एनिमेसनमा प्ले गर्दछ गोलाकार कुनाहरू सहित यसको कार्डहरूको लागि बाहिर खडा छ। धेरै वर्तमान र ती मध्ये एक एकमा यो सम्पूर्ण सूचीबाट बाहिर देखा पर्दछ।

शुद्ध CSS Carousel

हिंडोला

यो carousel एक को लागि बाहिर खडा छ साइड मेनू जुन बाट हामी जान सक्दछौं यसको प्रत्येक विकल्पमा क्लिक गर्दै। जानकारी एक राम्रो हासिल हासिल रिवाउन्ड प्रभाव संग देखा पर्दछ के भन्दा बढि देखा पर्छ।

ठाडो क्यारोसेल प्रतिक्रिया

हिंडोला

समान यसको ठाडोताको लागि पछिल्लोयद्यपि यो स्लाइडरले यसको प्रत्येक ट्याबहरूको छविहरू देखाउन पृष्ठको चौडाइ लिन सक्षम छ। यसको ठूलो ढाँचा र CSS स्लाइड्स को बीच स्लाइड को संक्रमण को उपयोग को लागी चाखलाग्दो

थ्रीडी स्प्लिट क्यारोसेल

विभाजन

स्लाइडर बान्कीको साथ उत्कृष्ट दृश्य प्रभाव जुन थ्रीडीमा घुमाउँदछ धेरै हडताल एनिमेसन। तपाईं प्रत्येक विकल्पहरू चयन गर्न सक्नुहुनेछ बायाँ साइड मेनूबाट प्रत्येकको लागि डट्सहरूको साथ। यो सृजनात्मकको लागि सूचीमा एक उत्तम।


लेखको सामग्री हाम्रो सिद्धान्तहरूको पालना गर्दछ सम्पादकीय नैतिकता। त्रुटि क्लिक गर्न रिपोर्ट गर्नुहोस् यहाँ.

२ टिप्पणीहरू, तपाइँको छोड्नुहोस्

तपाइँको टिप्पणी छोड्नुहोस्

तपाईंको ईमेल ठेगाना प्रकाशित हुनेछैन।

*

*

  1. डाटाका लागि उत्तरदायी: मिगुएल gelन्गल ग्याटन
  2. डाटाको उद्देश्य: नियन्त्रण स्पाम, टिप्पणी प्रबन्धन।
  3. वैधानिकता: तपाईंको सहमति
  4. डाटाको सञ्चार: डाटा कानुनी बाध्यता बाहेक तेस्रो पक्षलाई सूचित गरिने छैन।
  5. डाटा भण्डारण: डाटाबेस ओसीन्टस नेटवर्क (EU) द्वारा होस्ट गरिएको
  6. अधिकार: कुनै पनि समयमा तपाईं सीमित गर्न सक्नुहुनेछ, पुन: प्राप्ति र तपाईंको जानकारी मेटाउन।

  1.   मायरा ओरेलाना भन्यो

    शुभ प्रभात, म मेरो साइटमा शुद्ध सीएसएस करउजेल प्रयोग गर्न चाहान्छु, तर यो केवल एक स्थितिमा अवस्थित छ, म यसलाई आफ्नो पृष्ठमा चाहिने अवस्थितिमा कसरी बनाउन सक्छु।

    कृपया तपाईको साथ मद्दत गर्नुहोस्। धेरै धेरै धन्यबाद

  2.   जेभियर कैजारेस भन्यो

    म कसरी मेरो वेबसाइटको मोबाइल संस्करणमा होभर क्यारोसेल प्रदर्शन राम्रो बनाउन सक्छु?

  3.   गब्रिएल भन्यो

    उत्कृष्ट, के राम्रो काम तिनीहरूले गरे!

  4.   टोनी zambrano भन्यो

    नमस्कार, क्यारिज घरहरू धेरै राम्रा छन, तर यो अपलोड गर्ने बित्तिकै, म यसलाई प्रतिलिपि गरेर टाँस्नेछु, जाभास्क्रिप्टले मलाई त्रुटि अधिकतम = $ ('# c> li) .लेनट ... को कारणले त्रुटि दिन्छ। तपाई के सुझाव दिदै हुनुहुन्छ?