27 mga slider ng HTML at CSS upang bigyan ang iyong website ng espesyal na ugnayan

Slider ng cupcake

Nagpapatuloy kami sa isang pag-ikot ng CSS at HTML code na maaaring ipatupad sa aming website upang mabigyan ito ng espesyal na ugnayan kung saan maiiba ito mula sa iba pa. Salamat sa kontrol ng + c kasama ang kontrol na + v na magagawa natin nasa aming hand code na gagawing handa ang web na mai-publish sa pag-unlad pagkatapos ng paggastos ng mga araw o linggo sa pagsubok.

Ngayon na ang oras para sa 27 mga slider sa HTML at CSS na magpapahintulot sa amin na ihanda ang puwang na kung saan karaniwang isinasama namin ang maraming nilalaman sa ilang mga pixel na na-square. Ang mga slider na ito ay mula sa card, mapaghambing, buong screen, tumutugon at ang pinakasimpleng, ngunit sa parehong oras din napaka-matikas. Pupunta kami ng 27 mga slider na hindi mag-iiwan ng sinuman na walang malasakit, lalo na ang customer o gumagamit na dumaan sa iyong website upang mabasa ang nilalaman, bumili ng isang produkto o simpleng gumamit ng isang comparative slider upang ihambing ang isang imahe bago at pagkatapos.

Mga screen sa card

onboarding

Isang napaka-intuitive na slider sa HTML at CSS na nakikipag-usap kumuha ng isang serye ng mga kard sa iyong website na ipinapasa mula sa isa't isa kasama ang isang animasyon na may mahusay na estilo. Tiyak na ang animasyon at ang gradient sa background na nagbibigay ng banayad na ugnayan sa HTML at CSS code na ito na nakatayo din para sa isang maliit na JavaScript. Elegant ang salitang ilarawan ang kalidad na slider na ito.

Slider ng impormasyon card

Impormasyon ng slider

Ang slider ng info card na ito ay code rin sa HTML, CSS at JavaScript. Ito ay tungkol sa isang serye ng mga kard na hindi nakakaakit ng pansin para sa animasyon, bagaman ang pagiging simple nito ay ang pinakamalaking halaga. Isa pang slider upang isaalang-alang mula sa listahang ito.

Pahambing na slider ng imahe

Comparative slider

Ang slider na ito ay Ng dakilang pagiging kapaki-pakinabang at tiyak na nakita mo ito sa maraming mga website kung saan ang bago at pagkatapos ng mga larawan ay inihambing sa isang patayong bar na slide ng pahalang. Malaking tulong ito para sa mga paghahambing, kaya ginawa namin itong isa sa mga mahahalaga sa listahan ng mga slider.

Comparative slider nang walang JavaScript

Comparative slider nang walang JS

Ang mahusay na kalidad ng slider na ito ay iyon ay walang JavaScript, kaya ipapatupad mo lamang ang CSS at HTML code sa iyong website upang magkaroon ng isa pang paghahambing. Kakailanganin mong gamitin ang itim na kahon sa ilalim ng imahe upang i-slide ito mula sa isang gilid patungo sa kabilang panig upang makita ang paghahambing ng imahe. Hindi kasing intuitive tulad ng naunang isa, ngunit napaka kapaki-pakinabang nang walang JavaScript.

Three-layer na paghahambing ng imahe slider

Tatlong layer slider

Sinasabi ng pangalan nito ang lahat, isang slider ng imahe na ay nagbibigay-daan sa iyo upang ihambing ang hanggang sa tatlo nang paisa-isa. Ang halimbawang ibinigay ay ang isa upang makita ang ulo sa profile, isa pa upang ipakita ang mga kalamnan at isa pang slider upang makita ang mga buto. Gumagamit ito ng HTML, CSS at JavaScript para sa pagpapatakbo nito.

Vanilla JS Image Slider

Comparative slider

Isa pang mapaghambing na slider ng imahe may malaking pindutan kung saan i-slide ang imahe mula sa isang gilid patungo sa iba pa. Minimalist, na may maliit na JavaScript at isang mahusay na visual finish. Isa sa mga pinaka kapansin-pansin upang ihambing ang mga imahe.

Hatiin ang pahilis na screen

Diagonal na paghahambing slider

Ito mapaghambing na slider ng imahe Ito ay nilikha ng Envato Tuts at may pagkakaiba na ang slider ay inilalagay sa pahilis upang maging sanhi ng iba pang mga uri ng sensasyon kapag inihambing ang dalawang imahe. Gumagamit ito ng JavaScript, CSS at HTML upang maging isang mataas na kalidad na slider ng paghahambing.

Slider ng buong screen

Slider ng transisyon

Nakarating kami sa bahagi ng mga full screen slider upang makipagtagpo Ang Slider Transition ay nailalarawan sa pamamagitan ng isang paglipat natupad sa pamamagitan ng isang animation ng mahusay na epekto. Kung balak mong magpakita ng mga imahe sa buong screen at maingat mong naipapasa, code sa JavaScript, CSS at HTML.

Pahalang na slider na may paralax

Parallax slider

para mga tagahanga ng paralaks na epekto sa slider na ito gamit ang Swiper.js, HTML at CSS. Bukod sa kakayahang mag-slide gamit ang dalawang mga pindutan na matatagpuan sa bawat panig, sa kanang bahagi mayroon kaming pinaliit na lahat ng mga imahe ng kumpletong carousel. Isang magkaiba at mataas na kalidad na visual slider na hindi iiwan ang sinumang bibisita sa aming website na walang malasakit.

Makinis na slider ng pananaw ng 3D

3D na pananaw makinis na slider

Isang tumutugong slider na sundin ang mga paggalaw ng pointer mouse Ito ay may kakayahang magdulot ng isang mahusay na epekto ng pananaw na maaaring humantong sa magkahalong damdamin sa bisita. Kung alam mo kung paano ito gamitin nang maayos, maaari mong ibigay ang orihinal at banayad na ugnayan sa aming website. Ang JavaScript, CSS at HTML code ay hindi nawawala.

Hero full screen slider

Slider ng imahe ng bayani

Isang slider ng imahe ng buong bayani sa HTML, CSS at JavaScript. Magkaroon ng bounce effect sa bawat animasyon na nagbibigay nito nito at sa pangkalahatan ay nakaharap kami sa isang kalidad na full screen slider tulad ng natitirang listahan.

Ang slider ng VELO.JS na may mga hangganan

Mga gilid ng belo ng slider

Isa sa mga highlight bilang isang buong slider ng screen na may isang simpleng kamangha-manghang paglipat ng animasyon. Inirerekumenda namin na tingnan mo ito sa pagpapatakbo upang masimulan ang pag-iisip tungkol sa kung paano ito ipapatupad sa web. Gumamit ng mga epekto sa bilis Upang mapabuti ang animation na gumagamit ng mga arrow button, isang pag-click sa pag-navigate at kahit pag-scroll, Perpekto lamang.

Nakikiramay na patayong slider ng CSS na may mga thumbnail

Tumutugon slider ng CSS

Lumipat kami sa mga slider Nakikiramay na CSS para sa mobile mahusay na kalidad tulad ng isang ito. Magkakaroon ka ng isang serye ng mga thumbnail sa kanan na kapag pinindot ay magsisimulang isang patayo na bumabagsak na animasyon. Mahusay na epekto na gumagamit lamang ng CSS upang mag-iwan ng slider ng pinakamahusay sa listahang ito.

Image slider flexbox

Slider ng imahe ng Flexbox

Iba Tumutugon ang slider ng imahe na ginawa gamit ang JavaScript at ito ay higit pa sa simpleng maging matikas. Maikli, simple at minimalist na walang higit sa ito. Mayroon itong lugar sa listahang ito ng mga slider ng Flexbox.

Motion Blur sa mga filter ng SVG

Palusot ang paggalaw ng slide

Isang eksperimento na simulate ang epekto ng gumalaw ang paggalaw tuwing may slide ay naaktibo. Gumagamit ito ng isang SVG Gaussian blur filter at ilang mga CSS animation key. Ang code na ginamit sa JavaScript ay pulos para sa ibinigay na halimbawa at pag-andar ng slider.

Animated slider

Animated slider

Isang animated slider tumutugon sa JavaScript, HTML at CSS. Mayroon kaming mga arrow sa kanang bahagi na nagbibigay-daan sa amin upang dumaan sa mga imaheng nagmula sa isang kaaya-aya at maigsi na animasyon. Ang isang mahusay na epekto na nakamit sa bawat isa sa mga slide upang makilala ang sarili. Napaka-kasalukuyang sa mga animasyon.

Slider ng imahe na may mga pattern ng SVG

Slider lang ang CSS SVG

Isa pang isa sa mga eksperimentong iyon na sumusubok na magdala ng mga pattern ng svg upang lumikha ng ilang mga imahe ng mask para sa isang slider ng CSS. Gumagawa ito ng isang kapansin-pansin na blur effect na may mahusay na pagtatapos. Isa pa sa mga slider na iyon upang pukawin ang magagandang damdamin sa bisita ng aming website.

Simpleng layer slider

Layer slider

Isang slider na may isa pang higit sa kilalang animasyon na nag-aalok ng alon na epekto tuwing nag-click kami sa icon upang mag-slide ng isang bagong imahe. Tapos na sa HTML, CSS at JavaScript ito ay nagiging isa pang slider ng imahe.

Purong slider ng CSS

Purong slider ng CSS

Isa pa sa pinakasimpleng mga slider at iyon ay purong CSS. Isa sa mga kalamangan nitong mailagay sa kaliwa sa ibaba isang serye ng mga tuldok magsisilbing mga pindutan upang maabot ang bawat isa sa mga imahe na lilipas sa harap namin nang walang anumang espesyal na animasyon.

Cupcakes lamang ang slider ng CSS

Slider ng cupcake

El pinakamatamis na slider sa listahan at ito ay nasa CSS at HTML lamang. Ito ay isa sa pinaka espesyal sa buong listahan na mayroon sa kanang bahagi ng iba't ibang mga pagkakaiba-iba ng mga cupcake. Mag-click sa isa at lilitaw ang isang cupcake na may isang kahanga-hangang animation na nagtatapos sa isang mahusay na epekto ng bounce. Isa sa mga pinakamahusay na walang duda.

Epekto ng slide ng animasyon

Animasyon slider

Isa sa mga pinaka matikas na slider sa animasyon at ano namamahala upang humanga sa amin sa unang pagbabago. Mula sa unang sandali na lumitaw ang animation, ang HTML, CSS at JavaScript code na ito ay nagulat sa amin. Isa pa sa pinakamagaling sa minimalist na touch na ibinibigay nito.

hiwa ng slider

panghiwa ng slider

Un paglipat ng slider na gumagamit ng isang simpleng magdagdag ng klase at ito ay nailalarawan sa pamamagitan ng napaka-makinis na mga animasyon upang maging isa sa mga paborito sa listahang ito. Kung nais mong makilala ang iyong sarili sa mobile na bersyon ng web, ito ay isa sa mga mahahalaga. Mahusay na pakikitungo sa paningin.

Slider Parallax New York

Slider sa New York

Isa sa pinakamalaking pakinabang dito parallax slider sa CSS ay maaari itong ipasadya ng maraming. Nangangahulugan ito na maaari mong baguhin ang font, laki nito, kulay nito at ang bilis ng animasyon. Ang unang titik ng bawat lungsod sa isang bagong string ng JavaScript array ay lilitaw sa isang bagong slide. Isa pa sa mga mahalagang slider ng post na ito.

slider popout

slider popout

Gamit ang isang minimalist na istilo ng slider na ito ay ipinakita kung saan ang bawat bahagi ng imahe ay lalabas sa bawat slide. Napaka malikhain at naiiba mula sa nakikita sa listahan ng mga slider at na tumayo sa sarili nitong lugar.

Slider na may ripple effect

ripple slider

Un high-effects slider na full-effects na may mga patag na kulay upang makuha ang lahat ng katas nito. Ang JavaScript, HTML at CSS para sa isa pang slider na may nakakaakit na epekto.

Slider na may preview ng imahe

Nakaraang slider

Slider GSAP na may preview ng mga susunod na slide ipapakita iyon sa gumagamit. Perpekto para sa pagmomodelo sa isang fashion o disenyo ng website.

Mga paglilipat ng slider

Mga paglilipat ng slider

Natapos namin ang listahan sa a de-kalidad na slider na may bombastic effect at isang serye ng mga animasyon na nakakakuha ng espesyal na ugnayan sa aming website. Ang epekto ng paralaks ay maaaring buhayin.

Huwag palampasin ito isa pang listahan ng CSS code para sa mga pindutan.


Ang nilalaman ng artikulo ay sumusunod sa aming mga prinsipyo ng etika ng editoryal. Upang mag-ulat ng isang pag-click sa error dito.

Isang komento, iwan mo na

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish.

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.

  1.   Santiago dijo

    Napakaganda ng post na ito, maraming salamat sa pagbabahagi. Direktang pumunta sa mga paborito nang walang hinto.
    Pagbati asawa.