19 slankiklių ar karuselių CSS ir HTML jūsų svetainei

laisvi slankikliai

Turėdamas svetainės, kurios užima visą ekrano plotįMes pastebime, kad gali būti integruoti tam tikri elementai, kurie gali būti naudingi norint parodyti visą parduodamų produktų pavyzdį arba keliones, kurias galime pasiūlyti vasarai. Karuselės ar slankikliai yra vienas iš tų interneto elementų, kurie leidžia mums labai patraukliai parodyti savo produktus.

Los Nemokami slankikliai, slinktukai ar karuselės CSS kurį rasite žemiau, sudarykite gerą visų tikslų darbe repertuarą, kurį mes parodysime klientui, kol jie nepriims mūsų biudžeto. Tai slankiklių rinkinys HTML ir CSS su šiek tiek „JavaScript“ horizontaliu ir vertikaliu formatu. Padarykime tai, kad galėtumėte pasiekti kodą, kad juos greitai įdiegtumėte.

Horizontalios karuselės

Reaguojantis

Šią karuselę sudaro a gana prašmatni animacija tarsi pieštume užuolaidą, kad tiesiog priartintume profilių nuotraukas ir piktogramas, kurias ketiname nustatyti šiame slankiklyje. Tai puiki karuselė vartotojų, labai patenkintų mūsų internete parduodamais produktais, atsiliepimams.

Susijęs straipsnis:
27 HTML ir CSS slankikliai, suteikiantys jūsų svetainei ypatingą prisilietimą

Reaguojanti begalinė karuselė

Savęs atgaminimas

Šis slankiklis yra kaip reklama, kurią kartais galima pamatyti futbolo laukuose šonuose ir rodomi skirtingi horizontaliai slenkantys skelbimai. Tai idealiai tinka nukreipimo puslapiams, kuriuose reikia rodyti prekės ženklo partnerius ir kitų tipų logotipus.

Reakcijos karuselė

3D karuselė

Šis slinkimas išsiskiria savo React.js. kad vaizdai būtų rodomi proporcingo dydžio, kai einame iš vieno vaizdo į kitą nepertraukiamos animacijos būdu. Maža to, ką pasakyti apie šią gana paprastą CSS, tačiau tai yra puikus poveikis, jei žinome, kaip tinkamai ją patalpinti internete.

Sklandus 3D slankiklis

3D karuselė

Sudaryta iš HTML, CSS ir „JavaScript“, ši 3D karuselė išsiskiria sklandumu ir labai vizualiai šokinėjanti animacija. Elementų, identifikuojančių kiekvieną kortelę, serija, kūrinys ir akį traukianti karuselė, įtraukiant ją į savo svetainę.

Susijęs straipsnis:
46 „Javascript“ slankikliai ir slinktuvai

Automatinė begalinė karuselė

Begalinė karuselė

Slankiklis, kuris, kaip perspėja jo paties vardas, rodomas automatiškai vartotojui nereikalaujant bendrauti ne kartą su juo. Skirtingi vaizdai, iš kurių susidaro ši įspūdinga karuselė, atsiranda dėl perėjimo, kuriame ji stebuklingai išnyksta.

Užveskite karuselę

Užveskite karuselę

Su pakabos elementu tai slankiklis juda iš kairės į dešinęarba atvirkščiai, kai paliekame pelės žymeklį virš jo. Sklandus perėjimas norint judėti tarp skirtingų nuotraukų, kurios gali sudaryti šį vaizdo slankiklį.

Mobili karuselė

Mobili karuselė

taip pat vadinamas „Karuselės medžiagų dizainu“, ir atsižvelgiant į dabartinę visų rūšių kortelių tendenciją, čia galite rasti kitą straipsnį su dideliu jų kiekiu CSS / HTML, ji atsiriboja nuo likusios sudarydama „Google“ paskelbtą dizaino kalbą. Skirtingas korteles galite perkelti ilgai spausdami korteles.

„Instagram“ kanalų karuselė

Instagram

Galite sugadinti šio išsiskiriančio slankiklio idėją vaizdų juosta, kurią galima padidinti spustelėdami vieną iš jų. Puikiai veikianti animacija, nors ir skirta tam tikro tipo svetainei. „Instagram“ įrašai perkelti į „slick.js“ karuselę.

Paprasta sinchronizuota karuselė

Paprasta karuselė

Tai turi daug bendro su ankstesniuoju, ypač vaizdų juosta, nors ir sąveika su slankikliu yra labai skirtinga judindamas jį šoniniu mostu iš kairės į dešinę ir atvirkščiai. Vėlgi mes turime slick.js, darantį savo dalyką. Ryškus dėl savo puikaus efekto.

3D horizontalios karuselės

3D horizontali karuselė

Viena įdomiausių karuselių visame mūsų skelbiamame sąraše. Išsiskiria jūsų horizontalūs slankikliai CSS ir HTML kad fantastiškai gerai juda. Jums tereikia palikti pelės žymeklį ant langelių, kad surastumėte skirtingus efektus, kuriuos galima sukurti naudojant keturis variantus.

CSS karuselė

CSS 3D

Paprastas ir puikus vaizdo efektas su kortų serijos, kurios pakaitomis priekyje. Efektas yra 3D, todėl jis yra vienas iš tų slankiklių, kurie pritraukia daug dėmesio, ypač dėl minimalaus atšokimo efekto, kuris rodo to paties kūrėjo genialumą.

„Ambilight Bootstrap“ karuselė

Bootstrap karuselė

Paprastas, labai efektingas, daug kuo neišsiskiriantis slankiklis. Yra vienas iš tuos paprastus slankiklius kad mes paprastai ieškome ir tai suteikia tą jausmą būti vieniems be didelių fanfarų, tačiau tai puikiai atlieka jo funkciją.

Karuselės komanda

Karuselės komanda

Jei norite pristatyti dienoraštyje esančią redakcijos komandą, šis slankiklis yra puikus jo vaidmuo. Geras, panašus į ankstesnį, nes tai paprasta. Jis išsiskiria tuo, kad deimantai naudojami kiekvienai komandos fotografijai. Jis turi automatinį atkūrimą.

Karuselės kubas

3D kubas

Slankiklis, išsiskiriantis kubu, kuriame kiekvienas iš veidų yra vienas iš vaizdų ar nuotraukos, kurias norime rodyti svetainėje. Norėdami juos slinkti ir sužinoti, koks turinys jūsų laukia, tereikia spustelėti kiekvieną iš jų.

Karuselės rodyklių klavišai

CSS raktai

Slankiklis, kuriame vyksta sąveika naudodamiesi rodyklių klavišais. Paprasta be daugybės fanfarų, kurios tiesiogiai nukreipiamos į kitą sąveikos tipą, kuris atrodo prieš metus. Konkrečiam naudojimui.

Vertikalios karuselės

Vertikali karuselė

Slankiklis su puikiu vizualiniu efektu automatiškai groja nepertraukiamai vertikalia animacija kad išsiskiria kortomis su užapvalintais kampais. Labai aktualus ir vienas iš tų, kuris pats išsiskiria iš viso šio sąrašo.

Gryna CSS karuselė

Karuselė

Ši karuselė išsiskiria tuo, kad turi a šoninis meniu, iš kurio galime pereiti spustelėdami kiekvieną jos parinktį. Informacija pasirodo su gerai pasiektu atšokimo efektu be daug daugiau nei buvo pasakyta.

Vertikali karuselė reaguoja

Karuselė

Panašus į ankstesnis dėl savo vertikalumo, nors šis slankiklis gali užfiksuoti visą puslapio plotį, kad būtų rodomi kiekvieno jo skirtuko vaizdai. Įdomu dėl didelio formato ir CSS perėjimų naudojimo slinkti tarp skaidrių.

3D padalinta karuselė

skilimas

Puikus vaizdo efektas su slankiklių modeliu, kuris sukasi 3D formatu labai ryški animacija. Kairiajame šoniniame meniu galite pasirinkti kiekvieną parinktį su taškeliais kiekvienai iš jų. Vienas geriausių sąraše, kiek tai kūrybinga.


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

4 komentarai, palikite savo

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.

  1.   Mayra orellana sakė

    Labas rytas, aš noriu savo svetainėje naudoti „Pure CSS Carousel“, bet ji yra tik vienoje vietoje. Kaip aš galiu padaryti, kad ji būtų mano norimoje vietoje mano puslapyje.

    Prašau jūsų pagalbos šiuo klausimu. Labai ačiū

  2.   Xavier Cañizares sakė

    Kaip padaryti, kad „Hover Carousel“ būtų gerai rodoma mano svetainės mobiliojoje versijoje?

  3.   gabriel sakė

    Puiku, kokį gerą darbą jie atliko!

  4.   tonis Zambrano sakė

    sveiki, labai šaunios karuselės, bet kai tik ją įkeliu, nukopijuoju ir įklijuoju javascriptingo klaidą dėl var max = $ ('# c> li) .lenght…. Ką jūs siūlote