Attualmente, uno slider - un carosello - funzionalità che devi solo avere su un sito web per un'azienda, un sito web - un portfolio o qualsiasi altra risorsa. Insieme ai dispositivi di scorrimento delle immagini a schermo intero, i dispositivi di scorrimento a carosello orizzontali si adattano perfettamente a qualsiasi web design.
A volte il dispositivo di scorrimento dovrebbe occupare un terzo della pagina del sito. Qui il dispositivo di scorrimento del carosello viene utilizzato con effetti di transizione e layout reattivi. I siti di e-commerce utilizzano un dispositivo di scorrimento a carosello per mostrare più foto in singoli post o pagine. Il codice slider può essere utilizzato liberamente e modificato in base alle proprie esigenze.
Utilizzando jQuery in combinazione con HTML5 e CSS3, puoi rendere le tue pagine più interessanti fornendo loro effetti unici e attirando l'attenzione dei visitatori su un'area specifica del sito.
Slick - plugin di scorrimento moderno - carosello
Slick è un plug-in jquery gratuito i cui sviluppatori affermano che la loro soluzione soddisferà tutti i requisiti del dispositivo di scorrimento. Il dispositivo di scorrimento del carosello reattivo può funzionare in modalità tile per i dispositivi mobili e in modalità drag-and-drop per la versione desktop.
Contiene un effetto di transizione "dissolvenza", un'interessante funzione "modalità al centro", caricamento lento delle immagini con scorrimento automatico. La funzionalità aggiornata include l'aggiunta di diapositive e un filtro diapositiva. Tutto in modo che tu possa personalizzare il plugin in base alle tue esigenze.
Modalità demo | Scarica
Owl Carousel 2.0 - jQuery - plugin touch-friendly
Questo plugin ha una vasta gamma di funzioni nel suo arsenale, adatte sia ai principianti che agli sviluppatori esperti. Questa è una versione aggiornata del dispositivo di scorrimento del carosello. Il suo predecessore è stato chiamato esattamente lo stesso.
Il dispositivo di scorrimento contiene alcuni plug-in integrati per migliorare la funzionalità generale. Animazione, riproduzione video, autoplay con slider, caricamento lento, regolazione automatica dell'altezza sono le caratteristiche principali di Owl Carousel 2.0.
Il supporto per il trascinamento della selezione è incluso per un uso più conveniente del plug-in sui dispositivi mobili.
Il plugin è perfetto per visualizzare immagini di grandi dimensioni anche su piccoli schermi di dispositivi mobili.
Esempi | Scarica
Plugin jQuery Silver Track
Plugin jquery piuttosto piccolo, ma ricco di funzionalità che ti consente di posizionare uno slider sulla pagina: un carosello che ha un piccolo nucleo e non consuma molte risorse del sito. Il plugin può essere utilizzato per visualizzare slider verticali e orizzontali, animazioni e creare set di immagini dalla galleria.
Esempi | Scarica
AnoSlide - Slider jQuery reattivo ultra compatto
Uno slider jQuery ultra compatto: un carosello con molte più funzionalità di un normale slider. Include l'anteprima di una singola immagine, la visualizzazione a carosello multi-immagine e il dispositivo di scorrimento basato sul titolo.
Esempi | Scarica
Owl Carousel - Jquery Slider - Carousel
Owl carosello è un dispositivo di scorrimento drag and drop con touch screen, facilmente integrabile nel codice HTML. Il plugin è uno dei migliori slider che ti consente di creare bellissimi caroselli senza alcun markup appositamente preparato.
Esempi | Scarica
Galleria 3D - carosello
Utilizza transizioni 3D basate su stili CSS e del codice Javascript.
Esempi | Scarica
Carosello 3D con TweenMax.js e jQuery
Grande carosello 3D. Sembra che questa sia ancora una versione beta, perché ho scoperto un paio di problemi proprio ora. Se sei interessato a testare e creare i tuoi slider, questo carosello ti sarà di grande aiuto.
Esempi | Scarica
Carosello con bootstrap
Slider reattivo del carosello che utilizza la tecnologia bootstrap proprio per il tuo nuovo sito web.
Esempi | Scarica
Basato su Bootstrap - Struttura del dispositivo di scorrimento del carosello Moving Box
I più richiesti su portfolio e siti aziendali. Questo tipo di dispositivo di scorrimento a carosello si trova spesso su qualsiasi tipo di sito.
Esempi | Scarica
Piccolo Circleslider
Questo piccolo dispositivo di scorrimento è pronto per funzionare su dispositivi con qualsiasi risoluzione dello schermo. Il dispositivo di scorrimento può funzionare sia in modalità circolare che a carosello. Tiny circle si presenta come un'alternativa ad altri tipi di slider simili. È disponibile il supporto integrato per i sistemi operativi IOS e Android.
Il cursore sembra piuttosto interessante in modalità circolare. Il supporto drag and drop e il sistema di scorrimento automatico delle diapositive sono implementati in modo eccellente.
Esempi | Scarica
Slider contenuto Thumbelina
Il dispositivo di scorrimento a carosello potente e reattivo è perfetto per un sito Web moderno. Funziona correttamente su qualsiasi dispositivo. Ha modalità orizzontale e verticale. La sua dimensione è ridotta a solo 1 KB. Il plugin ultra compatto ha anche eccellenti transizioni fluide.
Esempi | Scarica
Wow - slider - carosello
Contiene oltre 50 effetti che possono aiutarti a creare uno slider originale per il tuo sito web.
Esempi | Scarica
Slider reattivo del contenuto jQuery bxSlider
Ridimensiona la finestra del browser per vedere come si adatta il dispositivo di scorrimento. Bxslider è dotato di oltre 50 opzioni di personalizzazione e mostra le sue funzionalità con vari effetti di transizione.
Esempi | Scarica
jCarousel
jCarousel è un plugin jQuery che ti aiuterà a organizzare l'anteprima dell'immagine. È possibile creare facilmente immagini carosello personalizzate dal framework mostrato nell'esempio. Lo slider è reattivo e ottimizzato per funzionare su piattaforme mobili.
Esempi | Scarica
Scrollbox - plugin jQuery
Scrollbox è un plugin compatto per la creazione di uno slider - carosello o linea di scorrimento del testo. Le caratteristiche principali includono lo scorrimento verticale e orizzontale con la pausa al passaggio del mouse.
Esempi | Scarica
dbpasCarousel
Cursore semplice - carosello. Se vuoi un plugin veloce, questo va bene al 100%. Viene fornito solo con le funzioni di base necessarie per il funzionamento dello slider.
Esempi | Scarica
Flexisel: plug-in di scorrimento JQuery reattivo - Carousel
I creatori di Flexisel si sono ispirati al plugin jCarousel old school, realizzandone una copia incentrata sul corretto funzionamento dello slider su dispositivi mobile e tablet.
Il layout responsive di Flexisel, quando si lavora su dispositivi mobili, differisce dal layout orientato alle dimensioni della finestra del browser. Flexisel è perfettamente adattato per lavorare su schermi, sia a bassa che ad alta risoluzione.
Esempi | Scarica
Elastislide - slider reattivo - carosello
Elastislide si adatta perfettamente alle dimensioni dello schermo del dispositivo. È possibile impostare il numero minimo di immagini da visualizzare a una risoluzione specifica. Funziona bene come un dispositivo di scorrimento del carosello della galleria di immagini, utilizzando un involucro fisso in combinazione con un effetto di scorrimento verticale.
Esempio | Scarica
FlexSlider 2
Slider liberamente ridistribuibile da Woothemes. È considerato uno dei migliori slider reattivi. Il plugin contiene diversi modelli e sarà utile sia per gli utenti principianti che per gli esperti.
Esempio | Scarica
Carosello fantastico
Amazing Carousel è uno slider di immagini jQuery reattivo. Supporta molti sistemi di gestione del sito come WordPress, Drupal e Joomla. Supporta anche Android e IOS e versioni desktop dei sistemi operativi senza alcun problema di compatibilità. I fantastici modelli di carosello integrati ti consentono di utilizzare il dispositivo di scorrimento in modalità verticale, orizzontale e circolare.
Esempi | Scarica
Il responsive web design o, se preferisci, il responsive web design non è solo un'altra tendenza del design ora, è già una sorta di standard di sviluppo di siti Web che garantisce l'universalità dei siti Web, una percezione visiva armoniosa sugli schermi dei vari dispositivi dell'utente. Più di recente, durante lo sviluppo di un modello reattivo, ho dovuto affrontare varie difficoltà nell'integrare determinati cursori e gallerie di immagini senza rompere lo stile generale del design. Ora tutto è molto più semplice, ci sono un numero enorme di soluzioni già pronte sulla rete e ciò che è particolarmente piacevole, la maggior parte di esse sono disponibili gratuitamente, con codice open source.
A causa della varietà di strumenti offerti, ho compilato una piccola panoramica degli sviluppi più importanti negli slider di immagini jQuery reattivi che sono apparsi di recente e sono distribuiti senza alcuna restrizione, ad es. assolutamente gratuito.
Wow cursore
Slider di immagini jQuery reattivo con un grande set di effetti visivi (svolte, partenze, sfocatura, spirali, persiane, ecc ...) e molti modelli già pronti. Con la procedura guidata di inserimento della pagina integrata di WOW Slider, puoi creare facilmente e facilmente presentazioni straordinarie in pochi minuti. Il sito dello sviluppatore contiene tutta la documentazione necessaria per configurare e utilizzare il plugin in russo, ottimi esempi dal vivo del lavoro del plugin. Sono inoltre disponibili per il download un plug-in Wordpress separato e un modulo per Joomla. Sono sicuro che a molti piacerà questo meraviglioso slider, sia principianti che webmaster avanzati.
HiSlider
HiSlider - HTML5, slider Jquery e galleria di immagini, plugin assolutamente gratuito per uso personale su siti che eseguono sistemi popolari - WordPress, Joomla, Drupal. Con l'aiuto di questo strumento semplice, ma abbastanza funzionale, puoi facilmente creare presentazioni sorprendenti e vivide, presentazioni efficaci e annunci di nuovi messaggi sulle pagine dei tuoi siti. Diversi modelli e skin già pronti per lo slider, straordinari effetti di transizione (cambiamento) dei contenuti, l'output di vari contenuti multimediali: video da YouTube e Vimeo, impostazioni utente flessibili, ecc.
cursore Nivo
Nivo Slider è un buon vecchio, noto a tutti in materia, uno degli slider di immagini più belli e facili da usare. Il plug-in jQuery Nivo Slider può essere scaricato e utilizzato gratuitamente, distribuito con licenza MIT. C'è anche un plugin separato per WordPress, ma sfortunatamente è già pagato e dovrai pagare $ 29 per una licenza. È meglio fare un po' di magia con i file del tema WP e allegare la versione jQuery gratuita del plug-in Nivo Slider al tuo blog, poiché ci sono abbastanza informazioni su come farlo sul web.
Per quanto riguarda la funzionalità, tutto è in ordine con questo. Per lavoro viene utilizzata la libreria jQuery v1.7+, bellissimi effetti di transizione, impostazioni semplici e molto flessibili, layout reattivo, ritaglio automatico delle immagini e molto altro.
L'idea dello slider è stata ispirata dagli sviluppatori noti per lo stile di presentazione dei prodotti Apple, dove diversi piccoli oggetti (immagini) cambiano cliccando sulla categoria selezionata con un semplice effetto di animazione. Codrops ti fornisce un tutorial dettagliato su come creare questo slider, un layout HTML completo, un set di regole CSS e un plug-in jQuery eseguibile, oltre a un meraviglioso esempio live di utilizzo dello slider.
Cursore a fessura
Dispositivo di scorrimento dell'immagine a schermo intero in jQuery e CSS3 + un tutorial dettagliato sull'integrazione del plug-in nelle pagine del sito. L'idea è quella di aprire a fette la diapositiva corrente con un contenuto specifico durante la navigazione al contenuto successivo o precedente. Con le animazioni jQuery e CSS, puoi creare transizioni di diapositive uniche. Il layout del dispositivo di scorrimento reattivo assicura che appaia ugualmente buono sugli schermi di vari tipi di dispositivi utente.
Dispositivo di scorrimento del contenuto elastico
Dispositivo di scorrimento del contenuto, che si regola automaticamente in larghezza e altezza in base alle dimensioni del contenitore padre in cui si trova. Abbastanza semplice nell'esecuzione e flessibile nello slider delle impostazioni alimentato da jQuery, con navigazione in basso, quando la dimensione dello schermo viene modificata verso il basso, la navigazione viene visualizzata sotto forma di icone. Documentazione molto dettagliata (tutorial sulla creazione) ed esempi di utilizzo dal vivo.
Slider pila 3D
Un dispositivo di scorrimento sperimentale che mostra immagini con transizioni dal piano 3D. Le immagini sono divise in due pile orizzontali, con l'aiuto delle frecce di navigazione cambiano e viene eseguita la transizione di ogni immagine successiva allo stato di visualizzazione. In generale, niente di speciale, ma l'idea stessa e la tecnica di esecuzione sono piuttosto interessanti.
Uno slider di immagini jQuery molto semplice, reattivo al 100% e a schermo intero. Lo slider si basa sulle transizioni CSS (la proprietà di transizione) in combinazione con la magia di jQuery. La larghezza massima è impostata al 100% per impostazione predefinita, quindi la dimensione delle immagini cambierà a seconda delle modifiche alle dimensioni dello schermo. Non ci sono effetti di animazione speciali e prelibatezze nel design, tutto è semplice e affilato per un funzionamento regolare.
Diapositive minime
Il nome parla da sé, questo è forse uno degli slider di immagini jQuery più leggeri e minimalisti che abbia mai incontrato (plugin in 1kb). ResponsiveSlides.jsè un piccolo plug-in jQuery che crea presentazioni utilizzando elementi all'interno di un contenitore. Funziona con un'ampia gamma di browser, comprese tutte le versioni di IE, il famoso freno al progresso, da IE6 in su. Il lavoro utilizza le transizioni CSS3 in combinazione con javascript, per l'affidabilità. Layout semplice utilizzando un elenco non ordinato, impostazione di transizioni e intervalli di tempo, controllo automatico e manuale del cambio di diapositive, nonché supporto per più presentazioni contemporaneamente. Ecco un "bambino" così giocoso.
Telecamera
Camera è un plug-in jQuery gratuito per l'organizzazione di presentazioni sulle pagine del sito, uno slider leggero con molti effetti di transizione, con un layout reattivo al 100% e impostazioni molto semplici. Si adatta perfettamente agli schermi di qualsiasi dispositivo utente (monitor di PC, tablet, smartphone e telefoni cellulari). La capacità di dimostrare video incorporato. Cambio automatico della diapositiva e controllo manuale tramite pulsanti e un blocco di miniature. Una galleria quasi completa di immagini in un design compatto.
bxSlider jQuery
Un altro slider jQuery reattivo abbastanza semplice. Qualsiasi contenuto, video, immagine, testo e altri elementi possono essere inseriti nelle diapositive. Supporto avanzato per touch screen. Utilizzo delle animazioni di transizione CSS. Un gran numero di diverse varianti della presentazione di presentazioni e gallerie di immagini compatte. Controllo automatico e manuale. Cambiare le diapositive usando i pulsanti e selezionando le miniature. Piccole dimensioni del file sorgente, molto facile da configurare e implementare.
FlexSlider 2
FlexSlider 2 - Una versione aggiornata del dispositivo di scorrimento con lo stesso nome, con reattività migliorata, minimizzazione degli script e reflow/ridisegna ridotti al minimo. Il plug-in include un dispositivo di scorrimento di base, un controllo a scorrimento con miniature, frecce sinistra-destra integrate e una barra di navigazione inferiore sotto forma di pulsanti. La possibilità di visualizzare video in diapositive (vimeo), impostazioni flessibili dei parametri (transizioni, decorazioni, intervallo di tempo), layout completamente reattivo.
Galleria
Plugin jQuery ben noto e molto popolare, reattivo per la creazione di gallerie di immagini e slider di alta qualità. L'interfaccia del dispositivo di scorrimento, grazie al suo pannello di controllo, ricorda visivamente un lettore video familiare, il plug-in include diversi temi. Supporto per video e immagini incorporati da servizi popolari: Flickr, Vimeo, YouTube e altri. Documentazione dettagliata sulla configurazione e l'uso.
Mirtillo
Un semplice slider di immagini jQuery gratuito, senza campanelli e fischietti, scritto appositamente per il web design reattivo. Blueberry è un plugin jQuery open source sperimentale. Design minimalista, nessun effetto, solo immagini pop-up che si sostituiscono a vicenda dopo un certo periodo di tempo. Tutto è molto semplice, configuralo, collegalo e vai...
jQuery popeye 2.1
Uno slider di immagini jQuery molto compatto con elementi Lightbox. Grazie alle sue dimensioni flessibili, è molto facile da incorporare in qualsiasi contenitore, in una singola voce sotto forma di miniature, quando si passa il cursore del mouse o si fa clic su di esse, viene attivata una lightbox con un'immagine ingrandita e controlli. È conveniente posizionare un tale dispositivo di scorrimento nelle barre laterali per presentare prodotti o annunci di notizie. Un'ottima soluzione per i siti con una grande quantità di informazioni.
Sequenza
Slider reattivo gratuito con transizioni CSS3 avanzate. Stile minimalista, 3 temi di design, ogni fotogramma scorre orizzontalmente, apparendo al centro, l'immagine va a sinistra, la firma a destra, le miniature sono duplicate nell'angolo in basso a destra. Impaginazione delle presentazioni dei prodotti per la visualizzazione in ogni frame. I controlli includono anche i pulsanti avanti e indietro. Supportato da tutti i browser moderni.
Scorri
Uno slider di immagini molto semplice sia in termini di funzionalità che di impostazioni, dalle impostazioni c'è un cambiamento nella velocità di cambio delle diapositive, collegando una modalità manuale (i pulsanti di controllo sono attivati), una presentazione continua. Questo slider ha il diritto di esserlo e mi ha attratto solo dal fatto che lo è, non ho trovato nulla di particolarmente interessante in questo sviluppo, forse stavo guardando male)))
Slider immagine reattiva
Un dispositivo di scorrimento dell'immagine così bello e adattivo di Vladimir Kudinov e compagni. Uno strumento solido e ben sviluppato, fornito di esempi illustrativi e istruzioni dettagliate per la creazione, l'installazione e l'utilizzo. Design reattivo, bei pulsanti verdi e frecce, tutto è abbastanza carino e calmo, senza pressione.
Cursore frazione
Plugin gratuito jQuery parallax slider per immagini e diapositive di testo. L'animazione della diapositiva ha più valori di spettacolo con il pieno controllo in ogni impostazione di temporizzazione e animazione. La capacità di animare più elementi contemporaneamente su una diapositiva. Puoi impostare diversi metodi di animazione, dissolvere diapositive o transizioni da una direzione specifica. Visualizzazione automatica e controllo manuale tramite frecce di navigazione che si aprono quando si passa con il mouse su un'immagine. 10 tipi di effetti di animazione dell'aspetto delle diapositive e molto altro ancora...
La recensione si è rivelata piuttosto ampia, ma non sufficientemente informativa a causa del gran numero di prodotti in questione. Tutti i dettagli e le descrizioni dettagliate delle funzionalità di questo o quel plugin si trovano direttamente nelle pagine degli sviluppatori. Posso solo sperare che qualcuno abbia reso più facile per qualcuno trovare quello strumento molto necessario per creare cursori di immagini colorate sulle pagine dei loro siti.
Ti sei mai chiesto se sarebbe bello poter lavorare con i modelli russificati? Pensa solo per un minuto. Nessuna perdita di tempo a lavorare con i modelli in inglese. Ci affrettiamo a farti piacere con il fatto che ora puoi trovare sul mercato TemplateMonster. Il testo per ciascuno di essi è stato scritto a mano. E, naturalmente, tutte le soluzioni già pronte sono incredibilmente facili da usare.
Con tutto il rispetto, Andrew
Ci sono molti ottimi plugin su Internet per la creazione di caroselli e slider jQuery. Consentono di implementare lo scorrimento dinamico con effetti aggiuntivi.
Questa è una delle tendenze del web design più in voga negli ultimi anni. Inoltre, l'uso di librerie già pronte e plugin jQuery può far risparmiare molto tempo. Tutto quello che devi fare è collegare i file JavaScript e CSS, quindi applicare l'effetto agli elementi HTML desiderati.
Puoi anche impostare le tue impostazioni e gli stili CSS. L'articolo di oggi ha lo scopo di presentarti i plug-in jQuery reattivi per la creazione di caroselli e slider.
Distratto - plugin jQuery per la creazione di slider di contenuti a schermo intero sensibile al tocco
Dispositivo di scorrimento del carosello di contenuti jQuery a schermo intero reattivo con supporto touchscreen. Il plugin è distribuito sotto GNU GENERAL PUBLIC LICENSE v3:
Neoslide: un plugin per il carosello jQuery semplice ed estensibile
Un plug-in jQuery semplice ed estensibile che ti consente di utilizzare uno slider completamente personalizzabile su qualsiasi pagina web:
Hslider: plug-in per galleria di immagini reattiva a pagina intera
Un altro plugin per mostrare le immagini utilizzando un carosello jQuery reattivo con controlli e tempi di permanenza personalizzabili:
Carousel 3D: plugin carousel jQuery con effetti di rotazione 3D
Sleek Slider: Carousel jQuery reattivo a schermo intero
Un carosello jQuery in miniatura e attraente per la visualizzazione di contenuti e immagini con vari tipi di navigazione ( Frecce SVG con miniature, elementi di impaginazione o schede):
PaW Carousel: un carosello reattivo basato su jQuery
PaW Carousel (v2) è un plug-in in miniatura per la creazione di caroselli jQuery semplici e reattivi con output di miniature:
Carousel Sharer: carosello jQuery per la condivisione sui social
Carousel Sharer è un plug-in jQuery che ti consente di visualizzare più prodotti in fila e consente ai visitatori di condividere i tuoi prodotti su Facebook, Twitter, Google+ e Pinterest:
Simply Carousel: un carosello di immagini minimalista e reattivo
Simply Carousel è un plug-in jQuery in miniatura e veloce che ti consente di creare slider reattivi flessibili e caroselli di immagini:
Diapositive: carosello jQuery reattivo e presentazione con supporto touch
Slides è un plug-in jQuery in miniatura per la creazione di caroselli reattivi per un sito jQuery con miniature, navigazione a freccia e la possibilità di utilizzare i propri controlli. È stato implementato il supporto per i touch screen:
Carosello di contenuti JQuery
Un semplice carosello jQuery reattivo con funzionalità di riproduzione automatica, controlli e persino callback:
Slick: un carosello jQuery reattivo e flessibile
Slick è un nuovo plug-in per la creazione di caroselli e slider jQuery personalizzabili, reattivi e ottimizzati per dispositivi mobili che possono funzionare con qualsiasi elemento HTML:
bxSlider: dispositivo di scorrimento del contenuto HTML jQuery
bxSlider è uno dei migliori slider di contenuti jQuery disponibili oggi. Questo plugin è perfetto per organizzare presentazioni:
CarouFredSel: un plugin carousel jQuery flessibile e potente
jQuery.carouFredSel è un plugin che trasforma qualsiasi elemento HTML in un carosello di contenuti. In esso è possibile scorrere uno o più elementi contemporaneamente, sia orizzontalmente che verticalmente. Puoi anche attivare la riproduzione automatica e rendere lo scorrimento infinito:
Carosello di loop dei contenuti JQuery
Un carosello in cui ogni clic rivelerà un nuovo blocco di contenuti. Cliccando sulla croce si chiuderà il blocco attivo e si tornerà alla posizione iniziale di visualizzazione delle miniature:
Cloud Carousel: Carosello 3D in Javascript
Questa giostra ti consente di creare una prospettiva realistica. Molti caroselli jQuery 3D applicano la prospettiva solo alla dimensione dell'immagine, non alla posizione dell'immagine, con conseguente squilibrio degli elementi sulla pagina:
Elastislide: carosello jQuery reattivo
Elastislide è un carosello jQuery reattivo che si adatta a qualsiasi dimensione dello schermo. L'inserimento della giostra in un contenitore di larghezza flessibile renderà la giostra stessa "gommosa":
jCarousel Lite
Con questo plugin sarai in grado di visualizzare immagini o elementi HTML come uno slider. Pesa solo 2Kb, ma ti permette di usare le tue impostazioni:
carosello 3D
Crea un carosello jQuery 3D da immagini con effetti ombra esterna e animazioni che reagiscono alla posizione del cursore:
Plugin carosello JQuery
Le impostazioni del plugin consentono di determinare quanti elementi verranno visualizzati nel carosello, dopodiché il plugin lo adatterà alla larghezza desiderata:
Slider rotante immagine JQuery
Un cursore di immagine asimmetrico con una leggera aggiunta: quando si scorrono le immagini, ruotano leggermente. A causa di un leggero spostamento degli elementi, il cursore assume una forma insolita:
Carosello di funzionalità JQuery
Questo plugin è progettato per visualizzare gli articoli in primo piano sulla home page, ma può essere utilizzato anche per qualsiasi altro contenuto. Consente di visualizzare fino a tre immagini contemporaneamente, mentre il resto degli elementi del carosello di contenuti jQuery sono nascosti:
jQuery Carosello infinito
È un plugin jQuery che ti consente di visualizzare un numero illimitato di immagini e video in un carosello. A differenza di altri caroselli, Infinite Carousel mostra gli elementi in un ciclo infinito senza bisogno di navigazione:
Plugin jQuery Liquid Carousel
Liquid Carousel è un plugin per la creazione di design fluidi. Ogni volta che il contenitore del carosello reattivo jQuery viene ridimensionato, il numero di elementi visualizzati viene ridimensionato per adattarsi alla nuova larghezza:
Jquery ms carosello
SliderPro- adattivo jQuery slider con supporto per miniature e altre impostazioni, inclusa la propria API.
- Il dispositivo di scorrimento si regola per adattarsi allo schermo per impostazione predefinita. Non solo le immagini verranno ridimensionate, ma anche i livelli con i tuoi contenuti aggiuntivi.
- Supporto per eventi touch-swipe per touch screen. L'utilizzo dei punti di interruzione è analogo alle query multimediali CSS per modificare le impostazioni del dispositivo di scorrimento su diverse dimensioni dello schermo.
- Animazione fluida con transizioni CSS3, animazione a livelli, effetto dissolvenza per cambiare le diapositive.
- Il dispositivo di scorrimento può essere a larghezza intera, a schermo intero o posizionato all'interno di un contenitore.
- Modifica automaticamente l'altezza della diapositiva. L'orientamento delle anteprime può essere verticale o orizzontale.
- Per le immagini, sono supportati il caricamento lento, la retina, la possibilità di caricare varie immagini per dimensioni dello schermo specifiche.
- Supporto video, integrazione lightbox, navigazione con frecce, punti, tastiera, miniature e molto, molto altro.
CSS
Includiamo il file di stile:
HTML
Un esempio di markup per l'inserimento di uno slider:
Js
Colleghiamo gli script necessari:
Inizializziamo il plugin:
Maggiori dettagli sullo slider e sul suo utilizzo sono disponibili su github. Collegamento sottostante.
Se hai bisogno di aggiungere uno slider di immagini jQuery di alta qualità al tuo sito, in questo articolo troverai una descrizione dei plugin necessari. Sebbene jQuery abbia reso JavaScript molto più facile da usare, abbiamo ancora bisogno di plugin per accelerare il processo di web design.
Possiamo apportare modifiche ad alcuni di questi plugin e creare nuovi slider molto più in linea con gli obiettivi del nostro sito.
Per altri dispositivi di scorrimento, devi solo aggiungere titoli, immagini e selezionare gli effetti di transizione delle diapositive forniti con il dispositivo di scorrimento. Tutti questi plugin sono ben documentati, quindi aggiungere nuovi effetti o funzionalità è facile. Puoi anche modificare i trigger basati su eventi se sei un programmatore jQuery esperto.
Le ultime tendenze come il responsive design sono molto importanti per i progetti web, sia che tu stia implementando un plugin o uno script. Tutti questi elementi rendono ciascuno di questi plugin molto flessibile. Tutto ciò che è uscito nel 2014 è incluso in questo elenco.
Slider immagine JQuery
Cursore reattivo Jssor
Di recente mi sono imbattuto in questo dispositivo di scorrimento jQuery funzionale e ho potuto constatare in prima persona che svolge molto bene il suo lavoro. Contiene infinite possibilità che possono essere espanse tramite il codice slider open source:
- Design adattivo;
- Più di 15 opzioni di personalizzazione;
- Più di 15 effetti di modifica dell'immagine;
- Galleria di immagini, caroselli, supporto per la dimensione dello schermo intero;
- Rotatore banner verticale, elenco diapositive;
- Supporto video.
Dimostrazione | Scarica
PgwSlider è uno slider reattivo basato su JQuery / Zepto
L'unico scopo di questo plugin è mostrare presentazioni di immagini. È molto compatto in quanto i file jQuery hanno una dimensione di soli 2,5 KB, il che lo rende molto veloce da caricare:
- Layout reattivo;
- ottimizzazione SEO;
- Supportato da diversi browser;
- Transizioni di immagini semplici;
- La dimensione dell'archivio è di soli 2,5 KB.
Dimostrazione | Scarica
JQuery Vertical News Slider
Uno slider jQuery flessibile e utile progettato per le risorse di notizie con un elenco di post sul lato sinistro e un'immagine sulla destra:
- Design adattivo;
- Colonna verticale per cambiare notizia;
- Intestazioni estese.
Dimostrazione | Scarica
Cursore Wallop
Questo slider non contiene JQuery, ma vorrei introdurlo in quanto è molto compatto e può ridurre significativamente i tempi di caricamento della pagina. Fammi sapere se ti piace:
- Layout reattivo;
- Design semplice;
- Varie opzioni per cambiare le diapositive;
- Codice JavaScript minimo;
- La dimensione è di soli 3 KB.
Dimostrazione | Scarica
Galleria Polaroid in stile piatto
Una galleria in stile documento con un layout flessibile e un bel design dovrebbe interessare a molti di voi. Più adatto per tablet e display di grandi dimensioni:
- Dispositivo di scorrimento reattivo;
- Design piatto;
- Cambio casuale di diapositive;
- Accesso completo al codice sorgente.
Dimostrazione | Scarica
A-Slider
Dimostrazione | Scarica
HiSlider - Slider per immagini HTML5, jQuery e WordPress
HiSlider ha introdotto un nuovo plug-in di scorrimento jQuery gratuito che ti consente di creare una varietà di gallerie di immagini con fantastiche transizioni:
- Dispositivo di scorrimento reattivo;
- Nessuna conoscenza di programmazione richiesta;
- Diversi fantastici modelli e skin;
- Bellissimi effetti di transizione;
- Supporto per diverse piattaforme;
- Compatibile con WordPress, Joomla, Drupal;
- Possibilità di visualizzare contenuti di diverso tipo: immagini, video YouTube e video Vimeo;
- Personalizzazione flessibile;
- Utili funzioni aggiuntive;
- Contenuto illimitato visualizzato.
Demo | Scarica
Wow cursore
WOW Slider è uno slider di immagini jQuery reattivo con immagini straordinarie ( domino, gira, sfoca, capovolgi e lampeggia, vola fuori, persiane) e modelli professionali.
WOW Slider viene fornito con una procedura guidata di installazione che ti consente di creare fantastici slider in pochi secondi senza dover passare attraverso il codice o modificare le immagini. Disponibile anche per le versioni download del plugin per Joomla e WordPress:
- Completamente reattivo
- Supporto per tutti i browser e tutti i tipi di dispositivi;
- Supporto per dispositivi touch;
- Facile installazione su WordPress;
- Flessibilità nella personalizzazione;
- Ottimizzato per SEO.
Demo | Scarica
Nivo Slider - Plugin jQuery gratuito
Nivo Slider è conosciuto in tutto il mondo come lo slider di immagini più bello e facile da usare. Il plugin Nivo Slider è gratuito e rilasciato sotto licenza MIT:
- È richiesto JQuery 1.7 o versioni successive;
- Bellissimi effetti di transizione;
- Semplice e flessibile da personalizzare;
- Compatto e adattabile;
- Sorgente aperta;
- Potente e semplice;
- Diversi modelli diversi;
- Ritaglio automatico delle immagini.
Demo | Scarica
Semplice slider jQuery con documentazione tecnica
L'idea è stata ispirata dagli slider di Apple, in cui diversi piccoli elementi possono volare via con vari effetti di animazione. Gli sviluppatori hanno cercato di implementare questo concetto, tenendo conto dei requisiti minimi per la creazione di un design semplice per un negozio online, in cui gli elementi "che volano via" rappresentano diverse categorie:
- Layout reattivo;
- Design minimalista;
- Vari effetti di caduta e cambio diapositiva.
Demo | Scarica
Dispositivo di scorrimento dell'immagine jQuery a grandezza naturale
Uno slider molto semplice che occupa il 100% della larghezza della pagina e si adatta alle dimensioni degli schermi dei dispositivi mobili. Funziona con le transizioni CSS e le immagini sono "impilate" con ancore. L'ancora può essere sostituita o rimossa se non si desidera collegare un collegamento all'immagine.
Una volta installato, il dispositivo di scorrimento si espande al 100% della larghezza dello schermo. Inoltre può ridurre automaticamente le dimensioni delle immagini delle diapositive:
- Cursore jQuery reattivo;
- Dimensione piena;
- Design minimalista.
Demo | Scarica
Slider Contenuto Elastico + tutorial
Elastic Content Slider regola automaticamente la larghezza e l'altezza in base alle dimensioni dell'elemento padre. Questo è un semplice slider jQuery. Consiste in un'area di scorrimento in alto e una barra delle schede di navigazione in basso. Il dispositivo di scorrimento regola la larghezza e l'altezza per adattarla al contenitore padre.
Se visualizzate su schermi diagonalmente piccoli, le schede di navigazione si trasformano in piccole icone:
- Design adattivo;
- Scorrimento con un clic del mouse.
Demo | Scarica
Slider Stack 3D gratuito
Un dispositivo di scorrimento sperimentale che sfoglia le immagini in 3D. Due pile assomigliano a pile di carta, dalle quali, durante lo scorrimento, le immagini vengono visualizzate al centro del dispositivo di scorrimento:
- Design adattivo;
- Flip-transizione;
- Effetti 3D.
Demo | Scarica
Slit Slider a schermo intero basato su JQuery e CSS3 + tutorial
Questo tutorial ti mostrerà come creare uno slider con una svolta: l'idea è di tagliare e visualizzare la diapositiva corrente mentre apri l'immagine successiva o precedente. Utilizzando jQuery e l'animazione CSS, possiamo creare effetti di transizione unici:
- Design adattivo;
- Transizione divisa;
- Dispositivo di scorrimento a schermo intero.
Demo | Scarica
Unislider è uno slider jQuery molto piccolo
Niente campane e fischietti inutili e markup, la dimensione è inferiore a 3 KB. Usa qualsiasi HTML per le tue diapositive, estendilo con CSS. Tutto ciò che riguarda Unslider è ospitato su GitHub:
- Supporto per vari browser;
- Supporto per tastiera;
- Regolazione altezza;
- Design adattivo;
- Supporto input tocco.
Dimostrazione | Scarica
Diapositive reattive minime
Plugin semplice e compatto ( la dimensione è solo 1 Kb), che crea uno slider reattivo utilizzando elementi all'interno di un contenitore. ResponsiveSLides.js funziona con un'ampia varietà di browser, incluse tutte le versioni di IE da IE6 in su:
- Completamente reattivo
- Dimensione 1KB;
- Transizioni CSS3 con la possibilità di essere eseguite tramite JavaScript;
- Markup semplice utilizzando un elenco puntato
- Possibilità di personalizzare gli effetti di transizione e la durata della visualizzazione di una diapositiva;
- Supporta la possibilità di creare più presentazioni;
- Scorrimento automatico e manuale.
Demo | Scarica
Fotocamera: slider jQuery gratuito
Camera è un plugin con molti effetti di transizione, layout reattivo. Facile da configurare, supportato da dispositivi mobili:
- Design completamente reattivo
- firme;
- La possibilità di aggiungere video;
- 33 icone di colore diverso.
Demo | Scarica
SlidesJS, un plugin jQuery reattivo
SlidesJS è un plug-in jQuery reattivo (1.7.1 e versioni successive) con supporto per transizioni touch e CSS3. Sperimentalo, prova alcuni esempi già pronti per aiutarti a capire come aggiungere SlidesJS al tuo progetto:
- Design adattivo;
- transizioni CSS3;
- Supporto per dispositivi touch;
- Facile da configurare.
Dimostrazione | Scarica
BX JQuery Slider
Questo è uno slider jQuery reattivo gratuito:
- Completamente reattivo: si adatta a qualsiasi dispositivo;
- Cambio orizzontale e verticale delle diapositive;
- Le diapositive possono contenere immagini, video o contenuto HTML;
- Supporto esteso per dispositivi touch;
- Utilizzo delle transizioni CSS per le animazioni delle diapositive ( accelerazione hardware);
- API di callback e metodi completamente pubblici;
- File di piccole dimensioni;
- Facile da implementare.
Demo | Scarica
FlexSlider 2
Miglior slider reattivo. La nuova versione è stata migliorata per aumentare la velocità di lavoro, la compattezza.
Dimostrazione | Scarica
Galleria - Galleria fotografica reattiva basata su JavaScript
Galleria è utilizzata da milioni di siti per creare gallerie di immagini di alta qualità. Il numero di recensioni positive sul suo lavoro è appena passato:
- Completamente gratis;
- Visualizzazione a schermo intero;
- 100% reattivo;
- Nessuna esperienza di programmazione richiesta;
- Supporto per iPhone, iPad e altri dispositivi touch;
- Flickr, Vimeo, YouTube e altro;
- Diversi argomenti.
Dimostrazione | Scarica
Blueberry è un semplice slider di immagini jQuery reattivo
Presentazione di uno slider di immagini jQuery scritto appositamente per il web design reattivo. Blueberry è un plug-in sperimentale di scorrimento delle immagini open source che è stato scritto specificamente per funzionare con modelli reattivi.
