19 slīdņi vai karuseļi CSS un HTML jūsu vietnei

Ar to vietnes, kas aizņem visu ekrāna platumuMēs noskaidrojām, ka var integrēt noteiktus elementus, kas var būt noderīgi, lai parādītu visu pārdošanai paredzēto produktu paraugu vai ceļojumus, kurus mēs varam piedāvāt vasarai. Karuseļi vai slīdņi ir viens no tiem tīmekļa elementiem, kas ļauj mums parādīt savus produktus ļoti uzkrītošā veidā.

L Bezmaksas slīdņi, ritinātāji vai karuseļi CSS ko jūs atradīsit zemāk, viņi veido labu repertuāru visu veidu darba mērķiem, kurus mēs parādīsim klientam, pirms viņi pieņem mūsu budžetu. Tā ir HTML un CSS slīdņu kolekcija ar mazliet JavaScript gan horizontālā, gan vertikālā formātā. Mēs to darīsim, lai jūs varētu piekļūt kodam, lai tos ātri ieviestu.

Horizontālie karuseļi

Šis karuselis sastāv no diezgan bezgaumīga animācija it kā mēs vilktu aizkaru, lai tikai tuvinātu profilu fotoattēlus un ikonas, kuras izveidosim šajā slīdnī. Tas ir ideāls karuselis to lietotāju atsauksmēm, kuri ir ļoti apmierināti ar produktiem, kurus mēs pārdodam tīmeklī.

saistīto rakstu:

27 HTML un CSS slīdņi, lai jūsu vietnei piešķirtu īpašu pieskārienu

Atsaucīgs bezgalīgs karuselis

Šis slīdnis ir piemēram, reklāma, kuru dažreiz var redzēt futbola laukumos sānos un parādot dažādas reklāmas, kas ritinās horizontāli. Tas ir ideāli piemērots galvenajām lapām, kurās jāparāda zīmola partneri un cita veida logotipi.

Reakcijas karuselis

Šis ritiniet izceļas ar savu React.js. Tas ļauj attēlot attēlus proporcionālā izmērā, kad mēs nepārtraukti animējam vienu attēlu no otra. Nedaudz vairāk ko teikt par šo diezgan vienkāršo CSS, taču tas ir lieliski, ja mēs zinām, kā to pareizi izvietot tīmeklī.

Gluds 3D slīdnis

Šis 3D karuselis, kas sastāv no HTML, CSS un JavaScript, izceļas ar gludumu un veselīga animācija ar lielisku vizuālo efektu. Ar virkni elementu, kas identificē katru karti, darbu un uzkrītošu karuseli, lai to iekļautu savā vietnē.

saistīto rakstu:

46 Javascript slīdņi un ritinātāji

Automātisks bezgalīgs karuselis

Slīdnis, kas, kā brīdina pats nosaukums, tiek parādīts automātiski bez lietotāja mijiedarbības nav laika ar viņu. Dažādi attēli, kas veido šo pārsteidzošo karuseli, parādās pārejas dēļ, kurā tas maģiski izgaist.

Virziet karuseli

Ar hover elementu šo slīdnis pārvietojas no kreisās uz labo pusi, vai otrādi, kad peles rādītāju atstājam virs tā. Gluda pāreja, lai pārvietotos starp dažādiem fotoattēliem, kas var veidot šī attēla slīdni.

Mobilais karuselis

arī sauca Karuseļa materiālu dizainsun atbilstoši pašreizējai visu veidu karšu tendencei, šeit jūs varat atrast citu rakstu ar lielu skaitu CSS / HTML, norobežojas no pārējiem, veidojot Google publicēto dizaina valodu. Varat pārvietot dažādas kartes, ilgi nospiežot uz tām.

Instagram barības karuselis

Jūs varat sabojāt šī slīdņa ideju, kas izceļas ar attēlu sloksni, kuru var palielināt noklikšķinot uz viena no tām. Lieliska efekta animācija, lai arī tā ir paredzēta konkrētam vietnes veidam. Instagram ziņas tiek pārnestas uz slick.js karuseli.

Vienkāršs sinhronizēts karuselis

Tas ir daudz saistīts ar iepriekšējo, it īpaši attēlu sloksnēs, lai gan mijiedarbība ar slīdni ir ļoti atšķirīga pārvietojot to ar sānu žestu no kreisās uz labo un otrādi. Atkal mums slick.js dara savu. Pārsteidzoši ar lielisko efektu.

3D horizontāli karuseļi

Viens no interesantākajiem karuseļiem visā mūsu publicētajā sarakstā. Izceļas jūsu horizontālie slīdņi CSS un HTML formātā kas kustas fantastiski labi. Jums tikai jāatstāj peles kursors virs lodziņiem, lai atrastu dažādus efektus, kurus var radīt ar četrām variācijām.

CSS karuselis

Vienkāršs un lielisks vizuālais efekts ar kāršu sērija, kas pēc kārtas priekšā. Efekts ir 3D formātā, tāpēc tas ir viens no tiem slīdņiem, kas piesaista lielu uzmanību, īpaši pateicoties minimālajam atsitiena efektam, kas parāda tā paša radītāja ģēniju.

Ambilight Bootstrap karuselis

Vienkāršs slīdnis ar lielisku efektu, kas īpaši neizceļas. Ir viens no tie vienkāršie slīdņi ko mēs parasti meklējam, un tas rada sajūtu, ka esam vieni bez lielām fanfarām, bet tas lieliski pilda savu funkciju.

Karuseļa komanda

Ja vēlaties iepazīstināt ar emuārā esošo redakcijas komandu, šis slīdnis ir ideāls savā lomā. Labs, līdzīgs iepriekšējam, cik tas ir vienkārši. Tas izceļas ar dimantu izmantošanu katras komandas fotogrāfijas ievietošanai. Tam ir automātiska atskaņošana.

Karuseļa kubs

Slīdnis, kas izceļas ar kubu, kurā katra no sejām ir viens no attēliem vai fotogrāfijas, kuras mēs vēlamies parādīt vietnē. Jums vienkārši jānoklikšķina uz katra no tiem, lai tos ritinātu un uzzinātu, kāds saturs jūs gaida.

Karuseļa bulttaustiņi

Slīdnis, kurā notiek mijiedarbība izmantojot bulttaustiņus. Vienkārši bez lielām fanfarām, kas tieši attiecas uz cita veida mijiedarbību, kas šķiet pirms gadiem. Konkrētai lietošanai.

Vertikāli karuseļi

Slīdnis ar lielisku vizuālo efektu automātiski tiek atskaņota nepārtrauktā vertikālā animācijā kas izceļas ar kārtīm ar noapaļotiem stūriem. Ļoti aktuāls un viens no tiem, kas pats par sevi izceļas no visa šī saraksta.

Tīrs CSS karuselis

Šis karuselis izceļas ar to, ka viņam ir sānu izvēlne, no kuras mēs varam doties noklikšķinot uz katras tās opcijas. Informācija parādās ar labi sasniegtu atsitiena efektu bez daudz vairāk nekā teiktais.

Reaģē vertikālā karuselis

Līdzīgs iepriekšējais par tā vertikālumu, lai gan šis slīdnis spēj uzņemt visu lapas platumu, lai parādītu katras cilnes attēlus. Interesanti ar lielo formātu un CSS pāreju izmantošanu, lai slīdētu starp slaidiem.

3D sadalītais karuselis

Lielisks vizuālais efekts ar slīdņu modeli, kas rotē 3D formātā ļoti uzkrītoša animācija. Katru no opcijām var izvēlēties kreisās puses izvēlnē ar punktiem katram no tiem. Viens no labākajiem sarakstā, cik tas ir radošs.