19 posuvníkov alebo karuselov CSS a HTML pre váš web

Tým, že webové stránky, ktoré zaberajú celú šírku obrazovky, zistíme, že je možné integrovať určité prvky, ktoré sa môžu hodiť na zobrazenie celej vzorky výrobkov na predaj alebo výletov, ktoré môžeme na leto ponúkať. Kolotoče alebo posúvače sú jedným z tých webových prvkov, ktoré nám umožňujú vizuálne ukázať naše výrobky veľmi pútavým spôsobom.

undefined Zadarmo posuvníky, posúvače alebo karusely v CSS ktoré nájdete nižšie, vytvorte si dobrý repertoár pre všetky druhy pracovných cieľov, ktoré ukážeme klientovi skôr, ako prijme náš rozpočet. Je to kolekcia jazdcov v HTML a CSS s trochou JavaScriptu v horizontálnom aj vertikálnom formáte. Urobme to, aby ste mali prístup ku kódu a mohli ich rýchlo implementovať.

Horizontálne kolotoče

Tento kolotoč sa skladá z a pekne okázalá animácia akoby sme kreslili oponu, iba oddialiť fotografie a ikony profilov, ktoré sa chystáme vytvoriť v tomto posuvníku. Je to dokonalý kolotoč na referencie používateľov, ktorí sú veľmi spokojní s výrobkami, ktoré predávame na webe.

Súvisiaci článok:

27 posúvačov HTML a CSS, ktoré vášmu webu dodajú osobitý nádych

Reagujúci nekonečný kolotoč

Tento posúvač je ako reklama, ktorú je niekedy možné vidieť na futbalových ihriskách po stranách a zobrazujúcich rôzne reklamy, ktoré sa posúvajú vodorovne. Je ideálny pre cieľové stránky, ktoré musia zobrazovať značkových partnerov a iné typy log.

Reagujte na kolotoč

Tento zvitok vyniká svojím React.js. ktorý je vhodný na zobrazovanie obrázkov v proporcionálnej veľkosti, keď prechádzame z jedného obrázka na druhý v nepretržitej animácii. Trochu viac povedať k tomuto pomerne jednoduchému CSS, ale má veľký efekt, ak vieme, ako ho správne umiestniť na web.

Hladký posúvač 3D

Tento 3D kolotoč, ktorý sa skladá z HTML, CSS a JavaScriptu, vyniká svojou plynulosťou a skákacia animácia so skvelým vizuálnym efektom. So sériou prvkov, ktoré identifikujú každú kartu, prácou a pútavým kolotočom, ktorý ju začlení do vášho webu.

Súvisiaci článok:

46 Posúvače a posúvače Javascript

Automatický nekonečný kolotoč

Posuvník, ktorý, ako upozorňuje jeho vlastný názov, sa zobrazí automaticky bez toho, aby používateľ musel komunikovať za chvíľu s ním. Rôzne obrázky, ktoré tvoria tento pozoruhodný kolotoč, sa objavujú v dôsledku prechodu, v ktorom magicky mizne.

Vznášajúci sa kolotoč

S prvkom vznášania toto posúvač sa pohybuje zľava doprava, alebo naopak, keď nad ním necháme ukazovateľ myši. Plynulý prechod na pohyb medzi rôznymi fotografiami, ktoré umožňujú zostavenie tohto posúvača obrázka.

Mobilný kolotoč

tiež s názvom Carousel Material Designa so súčasným trendom pri všetkých druhoch kariet, tu nájdete ďalší článok s veľkým počtom z nich v CSS / HTML, sa dištancuje od zvyšku, pretože je zložený z návrhového jazyka zverejneného spoločnosťou Google. Rôznymi kartami môžete hýbať dlhým stlačením kariet.

Instagram Feed Carousel

Tento nápad, ktorý vyniká, môže zlyhať pásom obrázkov, ktoré je možné zväčšiť kliknutím na jednu z nich. Animácia veľkého efektu, aj keď je určená pre konkrétny typ webových stránok. Príspevky z Instagramu odvedené do kolotoča slick.js.

Jednoduchý synchronizovaný kolotoč

Má veľa spoločného s predchádzajúcim, najmä v páse obrázkov interakcia s posúvačom je veľmi odlišná jeho pohybom laterálnym gestom zľava doprava a naopak. Opäť máme slick.js, ktorý robí svoje. Štrajkujúci pre svoj skvelý efekt.

3D horizontálne kolotoče

Jeden z najzaujímavejších kolotočov na celom zozname, ktorý zverejňujeme. Stojí za svoje vodorovné posúvače v CSS a HTML ktoré sa pohybujú fantasticky dobre. Musíte len nechať kurzor myši nad políčkami, aby ste našli rôzne efekty, ktoré sa dajú vytvoriť pomocou štyroch variácií.

Kolotoč CSS

Jednoduchý a vynikajúci vizuálny efekt s a rad kariet, ktoré sa striedajú v predu. Efekt je v 3D, takže je to jeden z tých posúvačov, ktoré priťahujú veľkú pozornosť, najmä kvôli minimálnemu efektu odrazu, ktorý ukazuje genialitu na strane jeho tvorcu.

Kolotoč Ambilight Bootstrap

Jednoduchý posúvač so skvelým efektom, ktorý príliš nevyniká. Je jeden z tie jednoduché posúvače ktoré zvyčajne hľadáme, a to dáva pocit, že sme jedno bez veľkých fanfár, ale to dokonale plní svoju funkciu.

Tím kolotočov

Ak chcete predstaviť redakčný tím, ktorý máte na blogu, tento posúvač je vo svojej úlohe dokonalý. Dobré podobné ako predchádzajúce, pretože je to jednoduché. Vyniká využitím diamantov na umiestnenie každej z fotografií tímu. Má automatické prehrávanie.

Kolotočová kocka

Posuvník, ktorý vyniká ako kocka, v ktorej každá z tvárí je jedným z obrázkov alebo fotografie, ktoré chceme zobraziť na webovej stránke. Musíte na ne kliknúť, posúvať ich a zistiť, aký obsah vás čaká.

Klávesy so šípkami na kolotoči

Posuvník, v ktorom prechádza interakcia pomocou klávesov so šípkami. Jednoduché bez veľkých fanfár, ktoré smerujú priamo k inému typu interakcie, ktorá vyzerá ako pred rokmi. Na konkrétne použitie.

Vertikálne kolotoče

Posuvník so skvelým vizuálnym efektom sa automaticky prehráva v nepretržitej vertikálnej animácii ktorá vyniká svojimi kartami so zaoblenými rohmi. Veľmi aktuálna a jedna z tých, ktorá vyniká sama od seba z celého tohto zoznamu.

Čistý kolotoč CSS

Tento kolotoč vyniká tým, že má bočné menu, z ktorého môžeme ísť kliknutím na každú z jeho možností. Informácie sa javia s dobre dosiahnutým odrazovým efektom bez oveľa viac, ako bolo uvedené.

Vertikálny kolotoč reaguje

Podobné predchádzajúca pre svoju vertikálnosť, aj keď tento posúvač dokáže zachytiť celú šírku stránky a zobraziť obrázky každej z jej kariet. Zaujímavé pre veľký formát a použitie prechodov CSS na posúvanie medzi snímkami.

3D rozdelený kolotoč

Skvelý vizuálny efekt so vzorom jazdcov, ktorý sa otáča v 3D s veľmi nápadná animácia. Každú z možností v ľavej ponuke môžete vybrať bodkami pre každú z nich. Jeden z najlepších v zozname, aký je kreatívny.