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
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.
Carosello infinito reattivo
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
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
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.
Giostra infinita automatica
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
Come posso fare in modo che Hover Carousel venga visualizzato bene sulla versione mobile del mio sito web?
Eccellente, che buon lavoro hanno fatto!
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