19 renna eða hringekjur CSS og HTML fyrir vefsíðuna þína

ókeypis renna

Að hafa vefsíður sem taka alla breidd skjásins, komumst við að því að hægt er að samþætta ákveðna þætti sem geta komið að góðum notum til að sýna heilt sýnishorn af vörum til sölu eða þær ferðir sem við höfum í boði fyrir sumarið. Hringekjur eða rennibrautir eru einn af þessum vefþáttum sem gera okkur kleift að sýna vörur okkar á mjög áberandi hátt sjónrænt.

Los Ókeypis rennibrautir, rollur eða hringekjur í CSS sem þú munt finna hér að neðan, búa til góða efnisskrá fyrir alls konar markmið í vinnunni sem við ætlum að sýna viðskiptavininum áður en þeir samþykkja fjárhagsáætlun okkar. Það er safn af renna í HTML og CSS með smá JavaScript á bæði láréttu og lóðréttu sniði. Gerum það svo þú hafir aðgang að kóðanum til að hrinda þeim í framkvæmd fljótt.

Lárétt hringekjur

Móttækilegur

Þessi hringekja samanstendur af a ansi áberandi fjör eins og ef við værum að teikna fortjald, til að þysja aðeins út fyrir myndirnar og táknmyndir sniðanna sem við ætlum að koma fyrir í þessari rennibraut. Það er fullkomin hringekja fyrir sögur frá notendum sem eru mjög ánægðir með þær vörur sem við seljum á vefnum.

Tengd grein:
27 HTML og CSS renna til að veita vefsíðunni þinni sérstaka snertingu

Móttækileg óendanleg hringekja

Sjálfsmyndun

Þessi renna er eins og auglýsingarnar sem stundum má sjá á fótboltavellinum á hliðunum og sýna mismunandi auglýsingar sem fletta lárétt. Það er tilvalið fyrir áfangasíður sem þurfa að sýna samstarfsaðila vörumerkis og aðrar tegundir lógóa.

Bregðast við hringekju

3D hringekja

Þessi rolla stendur upp úr fyrir React.js. sem lánar sig til að sýna myndir í hlutfallslegri stærð þegar við förum frá einni mynd til annarrar í stöðugu fjöri. Lítið meira um þessa nokkuð einföldu CSS að segja, en hefur mikil áhrif ef við vitum hvernig á að staðsetja það rétt á vefnum.

Slétt 3D Renna

3D hringekja

Samsett af HTML, CSS og JavaScript, þetta 3D hringekja stendur upp úr fyrir sléttleika og skoppandi fjör með miklum sjónrænum áhrifum. Með röð af atriðum sem auðkenna hvert kort, starf og áberandi hringekju til að fella það inn á vefsíðuna þína.

Tengd grein:
46 Javascript renna og skrun

Sjálfvirk óendanleg hringekja

Óendanleg hringekja

Renna sem, eins og nafnið varar við, birtist sjálfkrafa án þess að notandinn þurfi að hafa samskipti á engum tíma með honum. Mismunandi myndirnar sem mynda þessa sláandi hringekju birtast vegna umskipta þar sem hún töfrast með töfrum.

Sveima hringekju

Sveima hringekju

Með sveimaþáttinum þetta renna færist frá vinstri til hægri, eða öfugt, þegar við skiljum músarbendilinn eftir. Slétt umskipti til að fara á milli mismunandi ljósmynda sem geta samið þessa mynd renna.

Farsíma hringekja

Farsíma hringekja

einnig kallað Carousel Material Designog með núverandi þróun með allar tegundir korta, hér er hægt að finna aðra grein með fjölda þeirra í CSS / HTML, fjarlægir sig því sem eftir er vegna þess að það er samsett úr hönnunarmálinu sem Google gefur út. Þú getur fært mismunandi spil með því að ýta lengi á spilin.

Instagram fæðu hringekja

Instagram

Þú getur hrunið hugmyndina að baki þessari áherslu renna með myndbandi sem hægt er að stækka með því að smella á einn þeirra. Hreyfimynd með miklum áhrifum, þó að það sé beint fyrir ákveðna tegund vefsíðu. Instagram færslur teknar í slick.js hringekju.

Einföld samstillt hringekja

Einföld hringekja

Það hefur mikið að gera við þann fyrri, sérstaklega í myndbandinu þó samspil við rennibrautina er mjög mismunandi með því að færa það með hliðarbendingu frá vinstri til hægri og öfugt. Aftur höfum við slick.js að gera hlutina sína. Sláandi fyrir frábær áhrif.

3D láréttar hringekjur

3D lárétt hringekja

Ein áhugaverðasta hringekjan á öllum listanum sem við birtum. Stendur upp úr fyrir láréttu rennibrautina þína í CSS og HTML sem hreyfast frábærlega vel. Þú þarft aðeins að skilja músarbendilinn eftir kössunum til að finna mismunandi áhrif sem hægt er að framleiða með afbrigðunum fjórum.

CSS hringekja

CSS 3D

Einföld og frábær sjónræn áhrif með röð af kortum sem skiptast á að framan. Áhrifin eru í þrívídd, svo það er ein af þessum rennibrautum sem vekja mikla athygli, sérstaklega vegna lágmarks frákastsáhrifa sem sýna snilli frá skapara þess sama.

Ambilight Bootstrap hringekja

Bootstrap hringekja

Einföld renna með miklum áhrifum sem stendur ekki mikið fyrir. Er einn af þessar einföldu renna sem við leitum venjulega eftir og það gefur þá tilfinningu að vera einn án mikils ofstækis, en það fullnægir hlutverki sínu fullkomlega.

Hringekjulið

Hringekjulið

Ef þú vilt kynna ritstjórnina sem þú ert með á blogginu, þessi renna er fullkomin í sínu hlutverki. Gott svipað og það fyrra fyrir hversu einfalt það er. Það stendur upp úr með notkun demanta til að hýsa hverjar ljósmyndir teymisins. Það hefur sjálfvirka spilun.

Hringekjuteningur

3d teningur

Renna sem stendur upp úr fyrir að vera teningur þar sem hvert andlitið er ein af myndunum eða ljósmyndir sem við viljum birta á vefsíðu. Þú þarft aðeins að smella á hvern og einn þeirra til að fletta þeim og komast að því hvaða efni bíður þín.

Örklyklar hringekju

CSS lyklar

Renna þar sem samspilið fer í gegn með því að nota örvatakkana. Einfalt án mikils stuðnings sem fer beint í aðra tegund af samskiptum, sem virðist eins og fyrir árum síðan. Til sérstakrar notkunar.

Lóðrétt hringekjur

Lóðrétt hringekja

Renna með frábær sjónræn áhrif þessi spilar sjálfkrafa í stöðugu lóðréttu fjöri sem stendur upp úr fyrir spilin sín með ávöl horn. Mjög núverandi og ein af þeim sem sker sig einar út úr öllum þessum lista.

Hrein CSS hringekja

Hringekja

Þessi hringekja stendur upp úr fyrir að hafa a hliðarvalmynd sem við getum farið úr að smella á hvern þeirra valkosta. Upplýsingarnar birtast með vel náð frákastsáhrifum án mikils meira en sagt var.

Lóðrétt hringekja bregst við

Hringekja

Svipað og fyrri fyrir lóðréttleika, þó að þessi renna geti tekið alla breidd síðunnar til að sýna myndir af hverjum flipa hennar. Athyglisvert fyrir stórt snið og notkun CSS umbreytinga til að renna á milli skyggna.

3D Split hringekja

Split

Frábær sjónræn áhrif með rennimynstri sem snýst í þrívídd með mjög sláandi fjör. Þú getur valið hvern af valkostunum úr valmyndinni til vinstri með punktum fyrir hvern þeirra. Einn sá besti á listanum fyrir hversu skapandi hann er.


Innihald greinarinnar fylgir meginreglum okkar um siðareglur ritstjórnar. Til að tilkynna um villu smelltu hér.

4 athugasemdir, láttu þitt eftir

Skildu eftir athugasemd þína

Netfangið þitt verður ekki birt. Nauðsynlegir reitir eru merktir með *

*

*

  1. Ábyrgðarmaður gagna: Miguel Ángel Gatón
  2. Tilgangur gagnanna: Control SPAM, umsögn stjórnun.
  3. Lögmæti: Samþykki þitt
  4. Samskipti gagna: Gögnunum verður ekki miðlað til þriðja aðila nema með lagalegri skyldu.
  5. Gagnageymsla: Gagnagrunnur sem Occentus Networks (ESB) hýsir
  6. Réttindi: Hvenær sem er getur þú takmarkað, endurheimt og eytt upplýsingum þínum.

  1.   Mayra orellana sagði

    Góðan daginn, ég vil nota Pure CSS hringekju á síðunni minni, en hún er staðsett í aðeins einni stöðu, hvernig get ég látið hana vera í þeirri stöðu sem ég vil hafa á síðunni minni.

    Vinsamlegast hjálpaðu þér með þetta. Kærar þakkir

  2.   Xavier Cañizares sagði

    Hvernig get ég látið sveima hringekju sýna sig vel á farsímaútgáfu vefsíðu minnar?

  3.   Gabriel sagði

    Frábært, þvílíkt gott starf sem þeir unnu!

  4.   tony zambrano sagði

    Halló, vagnhúsin eru mjög flott, en um leið og ég hleð því upp, afrita ég og líma það, javascripið gefur mér villu vegna var max = $ ('# c> li) .lenght .... Hvað ertu að leggja til