19 cursori o caroselli CSS e HTML per il tuo sito web

cursori gratuiti

Avendo siti web che occupano l'intera larghezza dello schermoAbbiamo scoperto che possono essere integrati alcuni elementi che possono tornare utili per esporre un intero campione di prodotti in vendita o le gite che potremmo avere in offerta per l'estate. I caroselli o gli slider sono uno di quegli elementi web che ci permettono di mostrare i nostri prodotti in modo molto accattivante.

I Slider, scrollers o caroselli gratuiti in CSS che troverete di seguito, costituiscono un buon repertorio per tutti i tipi di obiettivi di lavoro che mostreremo al cliente prima che accetti il ​​nostro budget. È una raccolta di cursori in HTML e CSS con un po 'di JavaScript sia in formato orizzontale che verticale. Facciamolo così puoi accedere al codice per implementarli rapidamente.

Giostre orizzontali

Di risposta

Questa giostra è composta da un file animazione piuttosto appariscente come se stessimo disegnando una tenda, per rimpicciolire solo le foto e le icone dei profili che andremo a stabilire in questo slider. È un carosello perfetto per le testimonianze di utenti molto soddisfatti dei prodotti che vendiamo sul web.

Articolo correlato:
27 cursori HTML e CSS per dare al tuo sito web un tocco speciale

Carosello infinito reattivo

Auto-riproduzione

Questo cursore è come la pubblicità che a volte può essere vista sui campi da calcio ai lati e mostrando diversi annunci che scorrono in orizzontale. È ideale per le pagine di destinazione che devono mostrare partner del marchio e altri tipi di loghi.

React Carousel

Giostra 3D

Questo rotolo si distingue per il suo React.js. che si presta a visualizzare immagini di dimensioni proporzionate mentre si passa da un'immagine all'altra in un'animazione continua. Poco altro da dire su questo CSS abbastanza semplice, ma di grande effetto se sapremo posizionarlo correttamente sul web.

Smooth 3D Slider

Carosello 3D

Composto da HTML, CSS e JavaScript, questo carosello 3D si distingue per la sua scorrevolezza e un'animazione che rimbalza con un grande effetto visivo. Con una serie di elementi che identificano ogni carta, un lavoro e un carosello accattivante per incorporarlo nel tuo sito web.

Articolo correlato:
46 Slider e cursori Javascript

Giostra infinita automatica

Giostra infinita

Uno slider che, come avverte il suo stesso nome, viene visualizzato automaticamente senza che l'utente debba interagire in pochissimo tempo con lui. Le diverse immagini che compongono questa suggestiva giostra appaiono a causa della transizione in cui si dissolve magicamente.

Giostra al passaggio del mouse

Hover Carousel

Con l'elemento hover this il cursore si sposta da sinistra a destrao viceversa, lasciando il puntatore del mouse su di esso. Una transizione graduale per spostarsi tra le diverse foto che possono comporre questo cursore di immagine.

Carosello mobile

Giostra mobile

anche chiamato Carousel Material Designe con la tendenza attuale con tutti i tipi di carte, qui puoi trovare un altro articolo con un gran numero di loro in CSS / HTML, prende le distanze dal resto perché è composto dal linguaggio di design pubblicato da Google. Puoi spostare le diverse carte premendo a lungo sulle carte.

Carosello di feed di Instagram

Instagram

Puoi mandare in crash l'idea alla base di questo cursore di evidenziazione da una striscia di immagini che può essere ingrandita cliccando su uno di essi. Un'animazione di grande effetto, sebbene sia diretta per un determinato tipo di sito web. Post di Instagram portati su un carosello di slick.js.

Semplice giostra sincronizzata

Giostra semplice

Ha molto a che fare con il precedente, soprattutto nella striscia di immagini, sebbene l'interazione con lo slider è molto diversa spostandolo con un gesto laterale da sinistra a destra e viceversa. Ancora una volta abbiamo slick.js che fa la sua cosa. Colpisce per il suo grande effetto.

Giostre orizzontali 3D

Carosello orizzontale 3D

Uno dei caroselli più interessanti dell'intera lista che abbiamo pubblicato. Si distingue per i tuoi cursori orizzontali in CSS e HTML che si muovono meravigliosamente bene. Devi solo lasciare il puntatore del mouse sulle caselle per trovare i diversi effetti che possono essere prodotti con le quattro variazioni.

CSS Carousel

CSS 3D

Effetto visivo semplice e di grande effetto con a serie di carte che si alternano sul davanti. L'effetto è in 3D, quindi è uno di quegli slider che attirano molta attenzione, soprattutto per il minimo effetto di rimbalzo che mostra genialità da parte del creatore dello stesso.

Carosello Bootstrap Ambilight

Bootstrap Carousel

Un semplice cursore di grande effetto che non si distingue per molto. È uno di quei semplici cursori che di solito cerchiamo e che dà quella sensazione di essere uno senza troppe fanfare, ma che adempie perfettamente alla sua funzione.

Carousel Team

Carousel team

Se vuoi presentare la redazione che hai sul blog, questo cursore è perfetto nel suo ruolo. Buono simile al precedente per quanto sia semplice. Si distingue per l'uso di diamanti per ospitare ciascuna delle fotografie della squadra. Ha la riproduzione automatica.

Carousel Cube

Cubo 3d

Slider che si distingue per essere un cubo in cui ciascuna delle facce è una delle immagini o fotografie che vogliamo visualizzare su un sito web. Devi solo cliccare su ciascuno di essi per scorrerli e scoprire quale contenuto ti aspetta.

Tasti freccia del carosello

Chiavi CSS

Un cursore in cui passa l'interazione utilizzando i tasti freccia. Semplice senza troppe fanfare che vanno direttamente a un altro tipo di interazione, quella che sembra anni fa. Per un uso specifico.

Giostre verticali

Giostra verticale

Un cursore con un grande effetto visivo quello viene riprodotto automaticamente in un'animazione verticale continua che si distingue per le sue carte con angoli arrotondati. Molto attuale e uno di quelli che si distingue da solo da tutta questa lista.

Carosello CSS puro

Carosello

Questa giostra si distingue per avere un file menu laterale dal quale possiamo andare facendo clic su ciascuna delle sue opzioni. L'informazione appare con un effetto di rimbalzo ben ottenuto senza molto di più di quanto detto.

La giostra verticale reagisce

Carosello

Simile a precedente per la sua verticalità, sebbene questo cursore sia in grado di occupare l'intera larghezza della pagina per mostrare le immagini di ciascuna delle sue schede. Interessante per il suo grande formato e l'uso di transizioni CSS per scorrere tra le diapositive.

Carosello diviso 3D

Diviso

Ottimo effetto visivo con un motivo a cursori che ruota in 3D con un'animazione molto suggestiva. Ciascuna delle opzioni può essere selezionata dal menu a sinistra con punti per ciascuna di esse. Uno dei migliori della lista per quanto sia creativo.


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

4 commenti, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   Mayra orellana suddetto

    Buongiorno, voglio utilizzare Pure CSS Carousel sul mio sito, ma si trova in una sola posizione, come posso farlo si trova nella posizione che desidero all'interno della mia pagina.

    Per favore il tuo aiuto con questo Grazie mille

  2.   Xavier Cañizares suddetto

    Come posso fare in modo che Hover Carousel venga visualizzato bene sulla versione mobile del mio sito web?

  3.   Gabriel suddetto

    Eccellente, che buon lavoro hanno fatto!

  4.   Tony Zambrano suddetto

    Ciao, le carrozze sono molto belle, ma non appena lo carico, copio e incollo l'errore di javascripting a causa del var max = $ ('# c> li) .lenght…. Cosa stai suggerendo