Slider na carousel 19 an'ny CSS sy HTML ho an'ny tranonkalanao

Slider maimaim-poana

Amin'ny fananana tranokala izay mandray ny sakan'ny efijery manontoloHitanay fa misy singa sasany azo ampidirina izay afaka manampy amin'ny fampisehoana santionany amin'ny vokatra amidy na ny dia azonay omena mandritra ny fahavaratra. Ny carousels na ny slider dia iray amin'ireo singa ao amin'ny tranonkala ahafahantsika mampiseho ny vokatray amin'ny fomba mahasarika maso.

ny Slider, scrollers na carousel maimaim-poana amin'ny CSS izay ho hitanao etsy ambany, manaova repertoire tsara ho an'ny tanjona rehetra amin'ny asa izay hasehontsika ny mpanjifa alohan'ny haneken'izy ireo ny teti-bolanay. Izy io dia fitambaran-tsipika amin'ny HTML sy CSS miaraka amina JavaScript kely amin'ny endrika marindrano sy mitsangana. Andao ataontsika izany mba hahafahanao miditra amin'ilay kaody hampiharana azy ireo haingana.

Carousels marindrano

manaiky

Ity carousel ity dia misy a sary mihetsika tsara tarehy toy ny hoe manamboatra ambain-drindrina izahay, mba hanaparitahana sary sy sary famantarana ireo mombamomba na iza na iza hapetrakay amin'ity slider ity. Carousel tonga lafatra ho an'ny fijoroana vavolombelona avy amin'ireo mpampiasa izay tena afa-po amin'ny vokatra amidinay amin'ny Internet.

Lahatsoratra mifandraika:
Slider HTML HTML sy CSS 27 hanomezana ny tranokalanao izay mikasika manokana

Carousel tsy manam-petra mamaly

Fanabeazana-tena

Ity slider ity dia toy ny doka izay hita indraindray eo amin'ny kianja filalaovam-baolina amin'ny sisiny ary mampiseho doka samihafa izay mihodina mitsivalana. Mety ho an'ny pejy fitobiana izay mila mampiseho mpiara-miasa marika sy karazana logo hafa.

React Carousel

Carousel 3D

Ity horonan-taratasy ity miavaka amin'ny React.js. izay miseho amin'ny fampisehoana sary amin'ny habe mifanentana rehefa mifindra sary iray isika amin'ny sary mihetsika mitohy. Tsy hiteny intsony momba an'ity CSS tsotra ity, fa misy fiatraikany lehibe raha haintsika ny mametraka azy tsara amin'ny tranonkala.

Slider 3D malama

Carousel 3D

Voaforon'ny HTML, CSS ary JavaScript, ity carousel 3D ity dia miavaka amin'ny fahamendrehany ary sary mihetsika mivaingana misy vokany tsara amin'ny fahitana. Miaraka amina singa maromaro izay mamantatra ny karatra tsirairay, ny asa iray ary ny carousel mahasarika maso hampiditra azy ao amin'ny tranonkalanao.

Lahatsoratra mifandraika:
46 Javascript Slider sy Scrollers

Carousel tsy misy fetra mandeha ho azy

Carousel tsy manam-petra

Slider izay, araka ny fampitandreman'ny anarany manokana, dia aseho ho azy tsy mila mifanerasera ny mpampiasa amin'ny fotoana fohy miaraka aminy. Ireo sary samihafa mandrafitra ity carousel manaitra ity dia mipoitra noho ny tetezamita izay manjavona amin'ny majika.

Hover Carousel

Hover Carousel

Miaraka amin'ny singa hover ity mihetsika avy eo ankavia miankavanana ny slider, na ny mifamadika amin'izany, rehefa avelantsika hanondro azy ny totozy. Tetezamita malefaka hifindra eo anelanelan'ny sary samihafa afaka mamorona ity sary ity.

Mobile Carousel

Carousel finday

ihany koa antsoina hoe Carousel Material Design, ary amin'ny fironana ankehitriny miaraka amin'ny kara-pifandraisana isan-karazany, eto ianao dia afaka mahita lahatsoratra iray hafa miaraka amina maro an'isa ao amin'ny CSS / HTML, manalavitra ny ambiny amin'ny alalàn'ny firafitry ny fiteny famoahana navoakan'i Google. Azonao atao ny mamindra ireo karatra samihafa amin'ny alàlan'ny fanindriana lava ireo karatra.

Instagram Feed Carousel

Instagram

Azonao atao ny mamono ilay hevitra ao ambadiky ity slider misongadina ity amin'ny alàlan'ny sary iray izay azo lehibe kokoa amin'ny fipihana ny iray amin'izy ireo. Sarimiaina misy vokany lehibe, na dia natao ho an'ny tranonkala manokana aza. Lahatsoratra Instagram nalaina tamin'ny carousel slick.js

Carousel tsotra namboarina

Carousel tsotra

Izy io dia misy ifandraisany betsaka amin'ilay teo aloha, indrindra eo amin'ny tsipika sary, na izany aza ny fifandraisana amin'ny slider dia samy hafa be amin'ny alàlan'ny fihetsika amina sisiny avy amin'ny ankavia miankavanana ary ny mifamadika amin'izany. Indray mandeha isika dia manana slick.js manao ny zavatra. Manaitra ny vokany lehibe.

Carousels marindrano 3D

Carousel marindrano 3D

Iray amin'ireo carousel mahaliana indrindra amin'ny lisitra iray manontolo navoakanay. Mijoro eo ireo mpikorisa mitsivalana amin'ny CSS sy HTML izay mihetsika tsara. Mila mamela ny pointer totozy eo ambonin'ny boaty fotsiny ianao hahitanao ireo vokatra samihafa azo vokarina amin'ny karazany efatra.

CSS Carousel

CSS 3D

Vokatry ny sary tsotra sy tsara miaraka a andiana karatra mifandimby eo aloha. Ny vokany dia ao amin'ny 3D, noho izany dia iray amin'ireo mpikorisa mandrisika ny saina betsaka, indrindra noho ny fihemorana kely dia kely izay mampiseho ny fahaizan'ny mpamorona azy.

Ambilight Bootstrap Carousel

Bootstrap Carousel

Slider tsotra misy vokany lehibe izay tsy dia misongadina loatra. Iray amin'ny ireo mpikorisa tsotsotra ireo izay tadiavintsika matetika ary manome izany fahatsapana ho iray tsy misy fanana be izany, fa manatanteraka tsara ny asany.

Ekipa Carousel

Ekipa Carousel

Raha te hampahafantatra ny ekipa fanontana anananao ao amin'ny bilaogy ianao, ity slider ity dia tonga lafatra amin'ny anjara asany. Tsara mitovy amin'ny teo aloha noho ny fahatsorany. Misongadina amin'ny fampiasana diamondra hampiantranoana ny sarin'ny ekipa tsirairay. Manana playback mandeha ho azy izy io.

Carousel Cube

3D goba

Slider izay misongadina amin'ny maha goba anao ny tarehy tsirairay dia iray amin'ireo sary na sary tianay haseho amin'ny tranokala. Mila tsindrio fotsiny ny tsirairay amin'izy ireo mba hikorisa azy ireo ary hahitanao hoe inona ny atiny miandry anao.

Kitendry arrow Carousel

Fanalahidy CSS

Slider iray izay ialan'ny fifandraisana mampiasa ny bokotra zana-tsipika. Tsotra nefa tsy be mpankafy izay mandeha mivantana amin'ny karazana fifandraisana hafa, iray izay toa taona maro lasa izay. Ho an'ny fampiasana manokana.

Carousels mitsangana

Carousel mitsangana

Slider iray misy vokany tsara amin'ny fahitana azy mandeha ho azy amin'ny sarimiaina mitohy mitohy izay misongadina amin'ny karatra misy zorony boribory. Tena amin'izao fotoana izao ary iray amin'ireo misongadina samirery avy amin'ity lisitra iray manontolo ity.

Carousel CSS madio

Carousel

Ity carousel ity dia miavaka amin'ny fananana a menio sisiny izay ahafahantsika mandeha fipihana eo amin'ny safidiny tsirairay. Ny fampahalalana dia miseho miaraka amin'ny vokatra rebound vita tsara nefa tsy mihoatra ny voalaza.

Ny carousel mitsangana dia mihetsika

Carousel

Mitovitovy teo aloha noho ny fahamendrehany, na dia mahavita maka ny sakan'ny pejy manontolo aza ity mpikorisa ity mba hampisehoana ny sarin'ny tabilao tsirairay. Mahaliana noho ny endrika lehibe sy ny fampiasana ny tetezamita CSS hikorisa eo anelanelan'ny slide.

3D Split Carousel

Saraho

Vokatry ny sary mahafinaritra amin'ny lamina slider izay mihodina amin'ny 3D miaraka aminy sary mihetsika tena manaitra. Azonao atao ny misafidy ny safidy tsirairay avy amin'ny menio ankavia misy teboka ho an'ny tsirairay amin'izy ireo. Iray amin'ireo tsara indrindra amin'ny lisitra amin'ny fahaizany mamorona.


Ny atin'ny lahatsoratra dia manaraka ny fitsipiky ny etika fanonta. Raha hitatitra tsindry diso eto.

4 hevitra, avelao ny anao

Avelao ny hevitrao

Ny adiresy email dia tsy ho namoaka. Mitaky saha dia marika amin'ny *

*

*

  1. Tompon'andraikitra amin'ny data: Miguel Ángel Gatón
  2. Tanjon'ny angona: Control SPAM, fitantanana hevitra.
  3. Legitimation: Ny fanekenao
  4. Fifandraisana momba ny angona: Tsy hampitaina amin'ny antoko fahatelo ny angona raha tsy amin'ny adidy ara-dalàna.
  5. Fitehirizana angona: Database nomen'ny Occentus Networks (EU)
  6. Zo: Amin'ny fotoana rehetra, azonao atao ny mametra, mamerina ary mamafa ny mombamomba anao.

  1.   Mayra orellana dia hoy izy:

    Salama maraina, te hampiasa Carousel Pure CSS ao amin'ny tranokalanay aho, saingy toerana iray ihany no misy azy, ahoana no fomba anaovako azy io amin'ny toerana tadiaviko ao anatin'ny pejiko.

    Azafady, ny fanampianao amin'izany. Misaotra betsaka

  2.   Xavier Cañizares dia hoy izy:

    Ahoana no ahafahako manao Hover Carousel hiseho tsara amin'ny kinova finday ao amin'ny tranokalako?

  3.   Gabriel dia hoy izy:

    Tena tsara, asa tsara nataon'izy ireo!

  4.   tony zambrano dia hoy izy:

    Salama, milay be ny tranon'ny kalesy, fa raha vao ampakariko izy, dia adika sy apetako, manome ahy lesoka ny javascrip noho ny var max = $ ('# c> li) .lenght…. Inona no soso-kevitrao