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
Š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.
Reaguojanti begalinė karuselė
Š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ė
Š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
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ę.
Automatinė 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ę
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ė
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ė
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ė
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
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ė
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ė
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
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
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
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
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ė
Š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
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ė
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.
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ū
Kaip padaryti, kad „Hover Carousel“ būtų gerai rodoma mano svetainės mobiliojoje versijoje?
Puiku, kokį gerą darbą jie atliko!
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