19 mga slider o carousel CSS at HTML para sa iyong website

Sa pamamagitan ng pagkakaroon mga website na kukuha ng buong lapad ng screenNalaman namin na ang ilang mga elemento ay maaaring isama na maaaring magamit upang ipakita ang isang buong sample ng mga produktong ibinebenta o ang mga paglalakbay na maaari naming maalok para sa tag-init. Ang mga carousel o slider ay isa sa mga elemento ng web na nagpapahintulot sa amin na ipakita ang aming mga produkto sa isang napakahusay na paraan.

Los Libreng mga slider, scroller o carousel sa CSS na makikita mo sa ibaba, gumawa ng isang mahusay na repertoire para sa lahat ng uri ng mga layunin sa trabaho na ipapakita namin sa kliyente bago nila tanggapin ang aming badyet. Ito ay isang koleksyon ng mga slider sa HTML at CSS na may kaunting JavaScript sa parehong pahalang at patayong format. Gawin natin ito upang ma-access mo ang code upang maipatupad ang mga ito nang mabilis.

Pahalang na mga carousel

Ang carousel na ito ay binubuo ng a medyo marangya na animasyon na para bang gumuhit kami ng kurtina, upang mag-zoom out lamang para sa mga larawan at icon ng mga profile na ilalagay namin sa slider na ito. Ito ay isang perpektong carousel para sa mga testimonial mula sa mga gumagamit na nasiyahan sa mga produktong ibinebenta namin sa web.

Kaugnay na artikulo:

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

Tumutugon walang katapusang carousel

Ang slider na ito ay kagaya ng advertising na minsan nakikita sa mga patlang ng soccer sa mga gilid at nagpapakita ng iba't ibang mga ad na mag-scroll nang pahalang. Mainam ito para sa mga landing page na kailangang magpakita ng mga kasosyo sa tatak at iba pang mga uri ng logo.

React Carousel

Ang scroll na ito nakatayo para sa React.js nito. na nagpapahiram sa sarili sa pagpapakita ng mga imahe sa isang proporsyonal na laki habang nagpupunta kami mula sa isang imahe patungo sa isa pa sa isang tuluy-tuloy na animasyon. Wala pang masabi tungkol sa medyo simpleng CSS na ito, ngunit may malaking epekto kung alam namin kung paano ito iposisyon nang maayos sa web.

Makinis na 3D Slider

Binubuo ng HTML, CSS at JavaScript, ang 3D carousel na ito ay nakatayo para sa kinis nito at isang talbog na animasyon na may mahusay na visual effects. Sa isang serye ng mga elemento na kinikilala ang bawat card, isang trabaho at isang nakakaakit na carousel upang isama ito sa iyong website.

Kaugnay na artikulo:

46 Mga Slider at Scroller ng Javascript

Awtomatikong walang katapusang carousel

Ang isang slider na, bilang sarili nitong pangalan ay nagbababala, awtomatikong ipinapakita nang hindi kinakailangang makipag-ugnay ang gumagamit sa walang oras sa kanya. Ang iba't ibang mga imahe na bumubuo sa kapansin-pansin na carousel na ito ay lilitaw dahil sa paglipat kung saan ito mahiwagang kumukupas.

Mag-hover Carousel

Gamit ang hover na elemento na ito gumagalaw ang slider mula kaliwa patungo sa kanan, o kabaligtaran, habang iniiwan namin ang mouse pointer dito. Isang maayos na paglipat upang ilipat sa pagitan ng iba't ibang mga larawan na maaaring bumuo ng slider ng imahe na ito.

Mobile Carousel

Rin tinatawag na Carousel Material Design, at sa kasalukuyang kalakaran sa lahat ng mga uri ng kard, dito maaari kang makahanap ng isa pang artikulo na may maraming mga ito sa CSS / HTML, inilalayo nito ang sarili mula sa natitira sa pamamagitan ng pagiging binubuo ng disenyo ng wika na inilathala ng Google. Maaari mong ilipat ang iba't ibang mga kard sa pamamagitan ng mahabang pagpindot sa mga card.

Instagram Feed Carousel

Maaari mong i-crash ang ideya sa likod ng pag-highlight ng slider na ito sa pamamagitan ng isang strip ng mga imahe na maaaring mapalaki sa pamamagitan ng pag-click sa isa sa mga ito. Isang animation ng mahusay na epekto, kahit na ito ay nakadirekta para sa isang tukoy na uri ng website. Ang mga post sa Instagram na kinuha sa isang slick.js carousel.

Simpleng na-synchronize na carousel

Marami itong kinalaman sa nakaraang isa, lalo na sa strip ng mga imahe, bagaman ang pakikipag-ugnay sa slider ay ibang-iba sa pamamagitan ng paglipat nito ng kilid na kilos mula kaliwa hanggang kanan at kabaliktaran. Muli mayroon kaming makinis.js ginagawa ang bagay nito. Nakakaakit para sa mahusay na epekto nito.

Mga pahalang na carousel ng 3D

Isa sa mga pinaka-kagiliw-giliw na carousel sa buong listahan na nai-publish namin. Naninindigan para sa ang iyong mga pahalang na slider sa CSS at HTML na gumagalaw nang kamangha-manghang. Kailangan mo lamang iwanan ang mouse pointer sa mga kahon upang hanapin ang iba't ibang mga epekto na maaaring magawa sa apat na pagkakaiba-iba.

CSS Carousel

Simple at mahusay na visual effects na may a serye ng mga kard na pumalit sa harap. Ang epekto ay nasa 3D, kaya ito ay isa sa mga slider na nakakaakit ng maraming pansin, lalo na dahil sa kaunting rebound effect na nagpapakita ng henyo sa bahagi ng lumikha ng pareho.

Ambilight Bootstrap Carousel

Isang simpleng slider na may mahusay na epekto na hindi makilala nang labis. Ay isa sa ang mga simpleng slider na karaniwang hinahanap namin at nagbibigay sa damdaming iyon na maging isa nang walang labis na kaguluhan, ngunit perpektong natutupad ang pagpapaandar nito.

Koponan ng Carousel

Kung nais mong ipakilala ang koponan ng editoryal na mayroon ka sa blog, ang slider na ito ay perpekto sa papel nito. Magandang katulad sa naunang isa para sa kung gaano ito simple. Ito ay nakatayo para sa paggamit ng mga brilyante upang mai-tirahan ang bawat isa sa mga litrato ng koponan. Mayroon itong awtomatikong pag-playback.

Carousel Cube

Slider na nakatayo para sa pagiging isang kubo kung saan ang bawat isa sa mga mukha ay isa sa mga imahe o mga larawan na nais naming ipakita sa isang website. Kailangan mo lamang mag-click sa bawat isa sa kanila upang i-scroll ang mga ito at malaman kung anong nilalaman ang naghihintay sa iyo.

Mga carousel arrow key

Isang slider kung saan dumaan ang pakikipag-ugnayan gamit ang mga arrow key. Simple nang walang labis na pamaypay na dumidiretso sa isa pang uri ng pakikipag-ugnay, isa na tila mga taon na ang nakalilipas. Para sa isang tiyak na paggamit.

Mga vertikal na carousel

Isang slider na may mahusay na visual effects na awtomatikong nagpe-play sa isang tuluy-tuloy na patayong animasyon na nakatayo para sa mga kard nito na may bilugan na sulok. Napaka-kasalukuyan at isa sa mga nakatayo sa sarili nitong mula sa buong listahang ito.

Puro CSS Carousel

Ang carousel na ito ay namumukod sa isang side menu kung saan maaari kaming pumunta pag-click sa bawat isa sa mga pagpipilian nito. Lumilitaw ang impormasyon na may mahusay na nakakamit na rebound effect nang walang higit sa sinabi.

Vertical carousel react

Katulad sa nakaraang para sa kanyang patayo, kahit na ang slider na ito ay may kakayahang kunin ang buong lapad ng pahina upang maipakita ang mga imahe ng bawat isa sa mga tab na ito. Kagiliw-giliw na para sa kanyang malaking format at ang paggamit ng mga paglipat ng CSS upang slide sa pagitan ng mga slide.

3D Split Carousel

Mahusay na visual na epekto sa isang pattern ng slider na umiikot sa 3D na may isang kapansin-pansin na animasyon. Ang bawat isa sa mga pagpipilian ay maaaring mapili mula sa kaliwang menu ng gilid na may mga tuldok para sa bawat isa sa kanila. Isa sa pinakamahusay sa listahan kung gaano ito malikhain.