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

कपकेक स्लाइडर

हामी सीएसएस र एचटीएमएल कोडको एक गोलको साथ जारी राख्दछौं जुन हाम्रो वेबसाइटमा कार्यान्वयन गर्न सकिन्छ कि यसलाई विशेष स्पर्श दिनको लागि जुन यसलाई बाँकीबाट फरक पार्नुहोस्। हामी गर्न सक्ने + v नियन्त्रण प्लस + ​​v नियन्त्रण को लागि धन्यवाद हाम्रो ह्यान्ड कोड मा छ जुन वेबलाई तयार पार्नेछ दिन वा हप्ता परीक्षणमा खर्च गरेपछि विकासमा प्रकाशित गर्न।

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

अनुक्रमणिका

कार्डमा स्क्रीन

अनबोर्डिङ

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

सूचना कार्ड स्लाइडर

सूचना स्लाइडर

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

तुलनात्मक छवि स्लाइडर

तुलनात्मक स्लाइडर

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

जाभास्क्रिप्ट बिना तुलनात्मक स्लाइडर

JS बिना तुलनात्मक स्लाइडर

यस स्लाइडरको महान गुण भनेको त्यो हो जाभास्क्रिप्ट बिना आउँछ, त्यसैले तपाइँ केवल अर्को तुलना गर्न तपाइँको वेबसाइट मा CSS र HTML कोड लागू गर्न पर्छ। तपाईले छविको तल्लो भागमा कालो बक्स प्रयोग गर्नुपर्नेछ यसलाई एक तर्फ बाट अर्कोमा स्लाइड गर्न छवि तुलना गर्न। अघिल्लोको जस्तो सहज छैन, तर जाभास्क्रिप्ट बिना धेरै उपयोगी छ।

तीन-स्तर तुलनात्मक छवि स्लाइडर

तीन तह स्लाइडर

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

भनिला जे एस छवि स्लाइडर

तुलनात्मक स्लाइडर

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

विभाजन स्क्रीन विकर्ण

विकर्ण तुलनात्मक स्लाइडर

Este तुलनात्मक छवि स्लाइडर यो एन्भाटो टट्स द्वारा सिर्जना गरिएको हो र भिन्नता यो छ कि दुई छविहरूको तुलना गर्दा स्लाइडर अन्य प्रकारको संवेदना पैदा गर्न विकर्ण स्थानमा छ। यसले जाभास्क्रिप्ट, CSS र HTML प्रयोग गर्दछ उच्च गुणवत्ताको तुलनात्मक स्लाइडर हुन।

पूर्ण स्क्रीन स्लाइडर

संक्रमण स्लाइडर

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

लंबवत संग क्षैतिज स्लाइडर

लंबन स्लाइडर

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

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

थ्रीडी परिप्रेक्ष्य चिल्लो स्लाइडर

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

हीरो पूर्ण स्क्रीन स्लाइडर

हीरो छवि स्लाइडर

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

सीमानाको साथ VELO.JS स्लाइडर

स्लाइडर घुम्टो किनार

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

थम्बनेलहरूको साथ उत्तरदायी CSS भर्टिकल स्लाइडर

उत्तरदायी CSS स्लाइडर

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

छवि स्लाइडर फ्लेक्सबक्स

फ्लेक्सबक्स छवि स्लाइडर

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

SVG फिल्टरको साथ मोशन ब्लर

स्लाइडर गति धमिलो

एक प्रयोग जुन प्रभावको नक्कल गर्दछ हर चोटि एक स्लाइड ब्लर मोशन सक्रिय गरिएको छ। यसले SVG गौसियन ब्लर फिल्टर र केहि CSS एनिमेसन कुञ्जीहरू प्रयोग गर्दछ। जाभास्क्रिप्टमा प्रयोग गरिएको कोड पूर्णतया दिइएको उदाहरण र स्लाइडरको कार्यक्षमताको लागि हो।

एनिमेटेड स्लाइडर

एनिमेटेड स्लाइडर

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

SVG ढाँचा संग छवि स्लाइडर

स्लाइडर केवल CSS SVG

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

साधारण लेयर स्लाइडर

तहयुक्त स्लाइडर

एक भन्दा बढिको साथ एक स्लाइडर प्रतिष्ठित एनिमेसन प्रत्येक पटक हामी नयाँ छवि स्लाइड गर्न आइकनमा क्लिक गर्दा त्यो तरंग प्रभाव प्रदान गर्दछ। HTML, CSS र जाभास्क्रिप्टमा भयो यो अर्को छवि स्लाइडर बन्छ।

शुद्ध CSS स्लाइडर

शुद्ध CSS स्लाइडर

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

कपकेकहरू केवल CSS स्लाइडर

स्लाइडर कप केक

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

स्लाइडर एनिमेसन प्रभाव

एनिमेसन स्लाइडर

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

स्लाइडर स्लाइस

स्लाइडर स्लाइसर

Un ट्रान्जिसन स्लाइडर जसले साधारण एड क्लास प्रयोग गर्दछ र त्यो धेरै सहज एनिमेसन द्वारा विशेषता यो सूची मा मनपर्ने को एक बन्न। यदि तपाईं वेबको मोबाइल संस्करणमा आफूलाई अलग गर्न चाहानुहुन्छ भने, यो अत्यावश्यक मध्ये एक हो। नेत्रहीन रूपमा ठूलो सम्झौता।

स्लाइडर लंबन न्यु योर्क

स्लाइडर न्यूयोर्क

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

स्लाइडर पपआउट

स्लाइडर पपआउट

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

लहर प्रभावको साथ स्लाइडर

स्लाइडर लहर

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

छवि पूर्वावलोकनको साथ स्लाइडर

अघिल्लो स्लाइडर

स्लाइडर अर्को स्लाइडहरूको पूर्वावलोकनको साथ GSAP त्यो प्रयोगकर्तालाई प्रस्तुत गरिनेछ। फेसन वा डिजाइन वेबसाइटमा मोडेलिंगका लागि उत्तम।

स्लाइडर संक्रमण

स्लाइडर संक्रमण

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

यो याद नगर्नुहोस् अर्को CSS कोड सूची बटनहरूको लागि।


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

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

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

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

*

*

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

  1.   सान्टियागो भन्यो

    यो पोस्ट धेरै राम्रो छ, साझा को लागी धेरै धेरै धन्यवाद। मनपर्ने प्रत्यक्ष नन-स्टपमा जान्छ।
    सलाम छ साथी।