19 posuvníků nebo karuselů CSS a HTML pro váš web

posuvníky zdarma

Mít webové stránky, které zabírají celou šířku obrazovkyZjistili jsme, že lze integrovat určité prvky, které se mohou hodit k zobrazení celého vzorku produktů na prodej nebo výletů, které můžeme na léto nabídnout. Kolotoče nebo posuvníky jsou jedním z těch webových prvků, které nám umožňují ukázat naše produkty velmi poutavým způsobem.

L Zdarma posuvníky, posuvníky nebo karusel v CSS níže najdete dobrý repertoár pro všechny druhy pracovních cílů, které ukážeme klientovi, než přijme náš rozpočet. Je to kolekce posuvníků v HTML a CSS s trochou JavaScriptu v horizontálním i vertikálním formátu. Udělejme to, abyste mohli rychle přistupovat ke kódu a implementovat je.

Horizontální kolotoče

Citlivý

Tento kolotoč se skládá z a docela okázalá animace jako bychom kreslili oponu, jen oddálit fotografie a ikony profilů, které v tomto posuvníku vytvoříme. Je to dokonalý kolotoč pro ohlasy uživatelů, kteří jsou velmi spokojeni s produkty, které prodáváme na webu.

Související článek:
27 posuvníků HTML a CSS, které vašemu webu dodají ten zvláštní nádech

Reagující nekonečný kolotoč

Vlastní reprodukce

Tento posuvník je jako reklama, kterou lze někdy vidět na fotbalových hřištích po stranách a zobrazování různých reklam, které se posouvají vodorovně. Je ideální pro vstupní stránky, které potřebují ukázat partnerské značky a jiné typy log.

Reagovat na kolotoč

3D kolotoč

Tento svitek vyniká svým React.js. , který je vhodný pro zobrazování obrázků v přiměřené velikosti při přechodu z jednoho obrázku na druhý v nepřetržité animaci. Trochu víc k tomuto poměrně jednoduchému CSS, ale má velký účinek, pokud víme, jak jej správně umístit na web.

Hladký 3D posuvník

3D kolotoč

Tento 3D kolotoč, který se skládá z HTML, CSS a JavaScriptu, vyniká svou plynulostí a vysoce vizuální skákací animace. S řadou prvků, které identifikují každou kartu, prací a poutavým kolotočem, který ji začlení do vašeho webu.

Související článek:
46 Posuvníky a posuvníky Javascript

Automatický nekonečný kolotoč

Nekonečný kolotoč

Posuvník, který, jak varuje jeho vlastní název, se zobrazí automaticky aniž by uživatel musel komunikovat okamžitě s ním. Různé obrazy, které tvoří tento nápadný kolotoč, se objevují v důsledku přechodu, který magicky mizí.

Hove Carousel

Hover Carousel

S elementem hover this jezdec se pohybuje zleva doprava, nebo naopak, když nad ním necháme ukazatel myši. Plynulý přechod pro pohyb mezi různými fotografiemi, které mohou tento posuvník obrázku skládat.

Mobilní kolotoč

Mobilní karusel

také nazvaný Carousel Material Designa se současným trendem u všech typů karet, zde najdete další článek s velkým počtem z nich v CSS / HTML, se od ostatních distancuje, protože je složen z návrhového jazyka publikovaného společností Google. Různé karty můžete přesouvat dlouhým stisknutím karet.

Kolotoč Instagram Feed

Instagram

Myšlenku za tímto zvýrazňovacím posuvníkem můžete ukončit pruhem obrázků, které lze zvětšit kliknutím na jednu z nich. Animace s velkým efektem, i když je určena pro konkrétní typ webových stránek. Příspěvky z Instagramu pořízené na karuselu slick.js.

Jednoduchý synchronizovaný karusel

Jednoduchý kolotoč

Má hodně co do činění s předchozím, zejména v pruhu obrázků interakce s posuvníkem je velmi odlišná pohybem bočním gestem zleva doprava a naopak. Opět máme slick.js, který dělá svou věc. Stávkující pro svůj velký efekt.

3D horizontální kolotoče

3D horizontální kolotoč

Jeden z nejzajímavějších kolotočů na celém seznamu, který jsme zveřejnili. Stojí za horizontální posuvníky v CSS a HTML které se pohybují fantasticky dobře. Chcete-li najít různé efekty, které lze u těchto čtyř variant vytvořit, stačí ponechat ukazatel myši nad rámečky.

CSS Carousel

CSS 3D

Jednoduchý a skvělý vizuální efekt s a série karet, které se střídají vepředu. Efekt je ve 3D, takže je to jeden z posuvníků, který přitahuje velkou pozornost, zejména kvůli minimálnímu efektu odrazu, který ukazuje genialitu ze strany jeho tvůrce.

Ambilight Bootstrap Carousel

Bootstrap Carousel

Jednoduchý jezdec s velkým efektem, který moc nevyniká. Je jedním z ty jednoduché jezdce které obvykle hledáme a které dávají ten pocit být jedním bez velkých fanfár, ale to dokonale plní svou funkci.

Tým kolotočů

Tým kolotočů

Pokud chcete představit redakční tým, který máte na blogu, tento posuvník je ve své roli dokonalý. Dobré podobné předchozímu, jak je to jednoduché. Vyniká použitím diamantů k uložení každé z fotografií týmu. Má automatické přehrávání.

Kolotoč kostka

3D kostka

Posuvník, který vyniká jako kostka, ve které každá z tváří je jedním z obrazů nebo fotografie, které chceme zobrazit na webových stránkách. Stačí kliknout na každou z nich, posouvat je a zjistit, jaký obsah vás čeká.

Kruhové šipky

Klíče CSS

Jezdec, ve kterém interakce prochází pomocí kláves se šipkami. Jednoduché, bez velkých fanfár, které směřují přímo k jinému typu interakce, který vypadá jako před lety. Pro specifické použití.

Vertikální kolotoče

Vertikální kolotoč

Posuvník se skvělým vizuálním efektem automaticky přehrává v souvislé vertikální animaci který vyniká svými kartami se zaoblenými rohy. Velmi aktuální a jeden z těch, který sám o sobě vyniká z celého tohoto seznamu.

Čistý kolotoč CSS

Kolotoč

Tento kolotoč vyniká tím, že má postranní nabídka, ze které můžeme jít kliknutím na každou z jejích možností. Informace se objevují s dobře dosaženým efektem odrazu bez mnohem více, než bylo řečeno.

Vertikální kolotoč reaguje

Kolotoč

Podobné předchozí pro svislost, i když tento posuvník dokáže zachytit celou šířku stránky a zobrazit obrázky každé z jejích karet. Zajímavé pro jeho velký formát a použití přechodů CSS k posouvání mezi snímky.

3D dělený kolotoč

Rozdělit

Skvělý vizuální efekt se vzorem posuvníků, který se otáčí ve 3D s velmi nápadná animace. Každou z možností lze vybrat z levé nabídky s tečkami pro každou z nich. Jeden z nejlepších na seznamu, jak kreativní je.


Obsah článku se řídí našimi zásadami redakční etika. Chcete-li nahlásit chybu, klikněte zde.

4 komentářů, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Mayra orellana řekl

    Dobré ráno, chci na svém webu používat Pure CSS Carousel, ale nachází se pouze na jedné pozici, jak jej mohu na své stránce umístit na místo, které chci.

    Prosím, pomozte s tím. Děkuji

  2.   Xavier Cañizares řekl

    Jak mohu zajistit, aby se Hover Carousel dobře zobrazoval na mobilní verzi mého webu?

  3.   Gabriel řekl

    Výborně, jakou dobrou práci odvedli!

  4.   tony zambrano řekl

    Ahoj, kočárky jsou velmi cool, ale jakmile je nahraju, zkopíruji a vložím, javascript mi ​​dá chybu kvůli var max = $ ('# c> li) .lenght…. Co navrhuješ