Attualmente, uno slider - carosello - è una funzionalità che è semplicemente necessaria avere su un sito Web aziendale, un sito Web di portfolio o qualsiasi altra risorsa. Insieme ai dispositivi di scorrimento delle immagini a schermo intero, i dispositivi di scorrimento del carosello orizzontale si adattano bene a qualsiasi progetto web.

A volte lo slider dovrebbe occupare un terzo della pagina del sito. Qui lo slider del carosello viene utilizzato con effetti di transizione e layout reattivi. I siti di e-commerce utilizzano uno slider a carosello per visualizzare più foto in singoli post o pagine. Il codice dello slider può essere liberamente utilizzato e modificato in base alle proprie esigenze.

Utilizzando JQuery insieme a HTML5 e CSS3, puoi rendere le tue pagine più interessanti, fornire loro effetti unici e attirare l'attenzione dei visitatori su un'area specifica del sito.

Slick: moderno plugin per lo slider del carosello

Slick è un plugin jquery disponibile gratuitamente i cui sviluppatori affermano che la loro soluzione soddisferà tutti i requisiti dello slider. Dispositivo di scorrimento adattivo: il carosello può funzionare in modalità “tile” per i dispositivi mobili e in modalità “trascina e rilascia” per la versione desktop.

Contiene un effetto di transizione "dissolvenza", un'interessante funzionalità "modalità centrale", caricamento lento delle immagini con scorrimento automatico. Le funzionalità aggiornate includono l'aggiunta di diapositive e un filtro diapositive. Tutto per assicurarti di configurare il plugin in base alle tue esigenze.

Modalità demo | Scaricamento

Owl Carousel 2.0 – jQuery – plugin per l'utilizzo su dispositivi touch

Questo plugin ha un ampio set di funzioni, adatte sia ai principianti che agli sviluppatori esperti. Questa è una versione aggiornata dello slider del carosello. Il suo predecessore aveva lo stesso nome.

Lo slider ha alcuni plugin integrati per migliorare la funzionalità generale. Animazione, riproduzione video, riproduzione automatica dello slider, caricamento lento, regolazione automatica dell'altezza: queste sono le caratteristiche principali di Owl Carousel 2.0.

Supporto delle funzionalità trascinare e rilasciare drop è incluso per un utilizzo più conveniente del plugin sui dispositivi mobili.
Il plugin è perfetto per visualizzare immagini di grandi dimensioni anche su piccoli schermi di dispositivi mobili.

Esempi | Scaricamento

Plugin jQuery Silver Track

Un plug-in jquery abbastanza piccolo ma ricco di funzionalità che ti consente di posizionare uno slider su una pagina: un carosello, che ha un nucleo piccolo e non consuma molte risorse del sito. Il plugin può essere utilizzato per visualizzare cursori verticali e orizzontali, con animazioni e creare set di immagini dalla galleria.

Esempi | Scaricamento

AnoSlide: slider jQuery reattivo ultra compatto

Slider jQuery ultra compatto: carosello, la cui funzionalità è molto maggiore di quella di uno slider normale. Questi includono l'anteprima di una singola immagine, la visualizzazione di più immagini a carosello e la visualizzazione con dispositivo di scorrimento basata sul titolo.

Esempi | Scaricamento

Owl Carousel – Dispositivo di scorrimento Jquery – carosello

Giostra a forma di gufo – cursore con supporto schermi tattili e tecnologie drag and drop, facilmente integrabili nel codice HTML. Il plugin è uno dei migliori slider che ti permettono di creare bellissimi caroselli senza alcun markup appositamente preparato.

Esempi | Scaricamento

Galleria 3D - carosello

Utilizza transizioni 3D basate su stili CSS e un po' di codice Javascript.

Esempi | Scaricamento

Carosello 3D che utilizza TweenMax.js e jQuery

Magnifico carosello 3D. Sembra che questa sia ancora una versione beta, perché ho scoperto proprio ora un paio di problemi. Se sei interessato a testare e creare i tuoi slider, questo carosello ti sarà di grande aiuto.

Esempi | Scaricamento

Carosello utilizzando bootstrap

Slider reattivo: carosello che utilizza la tecnologia bootstrap solo per il tuo nuovo sito web.

Esempi | Scaricamento

Dispositivo di scorrimento del carosello Moving Box basato sul framework Bootstrap

Più popolare su portfolio e siti Web aziendali. Questo tipo di slider, il carosello, si trova spesso su siti di qualsiasi tipo.

Esempi | Scaricamento

Piccolo Circleslider

Questo dispositivo di scorrimento di piccole dimensioni è pronto per funzionare su dispositivi con qualsiasi risoluzione dello schermo. Lo slider può funzionare sia in modalità circolare che a carosello. Tiny Circle si presenta come alternativa ad altri slider di questo tipo. Supporto integrato disponibile sistemi operativi iOS e Android.

In modalità circolare, lo slider sembra piuttosto interessante. Ottimo supporto per il metodo drag and drop e un sistema di scorrimento automatico delle diapositive.

Esempi | Scaricamento

Dispositivo di scorrimento del contenuto di Thumbelina

Uno slider carosello potente e adattivo è perfetto per un sito Web moderno. Funziona correttamente su qualsiasi dispositivo. Ha modalità orizzontale e verticale. La sua dimensione è ridotta al minimo a solo 1 KB. Il plugin ultra compatto ha anche eccellenti transizioni fluide.

Esempi | Scaricamento

Wow – cursore – carosello

Contiene più di 50 effetti, che possono aiutarti a creare uno slider originale per il tuo sito web.

Esempi | Scaricamento

Dispositivo di scorrimento del contenuto jQuery reattivo bxSlider

Ridimensiona la finestra del browser per vedere come si adatta il dispositivo di scorrimento. Bxslider viene fornito con più di 50 opzioni di personalizzazione e mostra le sue funzionalità con vari effetti di transizione.

Esempi | Scaricamento

jCarosello

jCarousel è un plugin jQuery che ti aiuterà a organizzare la visualizzazione delle tue immagini. Puoi creare facilmente caroselli di immagini personalizzati dalla base mostrata nell'esempio. Lo slider è adattivo e ottimizzato per lavorare su piattaforme mobili.

Esempi | Scaricamento

Scrollbox - plugin jQuery

Scrollbox è un plugin compatto per creare uno slider: un carosello o una scansione del testo. Le caratteristiche principali includono effetti di scorrimento verticale e orizzontale con pausa al passaggio del mouse.

Esempi | Scaricamento

dbpasCarousel

Un semplice dispositivo di scorrimento del carosello. Se hai bisogno di un plugin veloce, questo è adatto al 100%. Viene fornito con solo le funzionalità di base necessarie per il funzionamento dello slider.

Esempi | Scaricamento

Flexisel: plug-in reattivo JQuery Slider - Carousel

I creatori di Flexisel si sono ispirati al plugin vecchia scuola jCarousel, realizzandone una copia finalizzata al corretto funzionamento dello slider su dispositivi mobili e tablet.

Il layout reattivo di Flexisel, quando viene eseguito su dispositivi mobili, è diverso da un layout delle dimensioni di una finestra del browser. Flexisel è perfettamente adattato per funzionare su schermi, sia a bassa che ad alta risoluzione.

Esempi | Scaricamento

Elastislide – cursore adattivo – giostra

Elastislide si adatta perfettamente alle dimensioni dello schermo del tuo dispositivo. È possibile impostare il numero minimo di immagini da visualizzare con una risoluzione specifica. Funziona bene come dispositivo di scorrimento a carosello con gallerie di immagini, utilizzando un wrapper fisso insieme a un effetto di scorrimento verticale.

Esempio | Scaricamento

Flex Slider 2

Dispositivo di scorrimento gratuito di Woothemes. È giustamente considerato uno dei migliori slider adattivi. Il plugin contiene diversi modelli e sarà utile sia per gli utenti principianti che per quelli esperti.

Esempio | Scaricamento

Carosello straordinario

Amazing Carousel: dispositivo di scorrimento delle immagini reattivo che utilizza jQuery. Supporta molti sistemi di gestione dei contenuti come WordPress, Drupal e Joomla. Supporta anche Android, IOS e sistemi operativi desktop senza problemi di compatibilità. Gli straordinari modelli di carosello integrati ti consentono di utilizzare il dispositivo di scorrimento in modalità verticale, orizzontale e circolare.

Esempi | Scaricamento

In questo articolo, vedremo come è possibile creare in modo molto semplice uno slider adattivo per un sito Web utilizzando CSS Flexbox e trasformazioni CSS.

Codici sorgente e demo del dispositivo di scorrimento

Un progetto slider chiamato chiefSlider si trova su GitHub. Puoi accedervi utilizzando questo collegamento.

Dispositivo di scorrimento con una diapositiva attiva (nessun loop):

Slider con tre diapositive attive (nessun loop):

Un esempio che mostra come utilizzare uno slider per ruotare gli articoli:

Vantaggi di chiefSlider

Elenchiamo i principali vantaggi di questo slider:

• innanzitutto lui non crea cloni di elementi (item) per organizzare il looping, come implementato, ad esempio, nei plugin GufoCarosello E liscio;
• in secondo luogo, non dipende dalla biblioteca jQuery; questo non solo rimuove ulteriori requisiti, ma lo rende anche più semplice;
• in terzo luogo, lo è praticamente non apporta alcuna modifica al DOM del documento; l'unica cosa che fa è aggiungere o modificare i valori di trasformazione CSS per gli elementi slider;
• in quarto luogo, contiene solo insieme minimo di funzioni; funzionalità aggiuntive può essere aggiunto a seconda dell'attività;
• in quinto luogo, è adattivo, cioè può essere utilizzato su qualsiasi sito web; L'adattabilità dello slider è configurata tramite CSS;
• sesto, il numero di elementi attivi viene regolato utilizzando i CSS; ciò significa che può essere utilizzato per creare un carosello con una diapositiva attiva o un numero qualsiasi di diapositive.

Installazione di chiefSlider

L'installazione dello slider richiede 3 passaggi:

• aggiungere il CSS chiefSlider alla pagina o ad un file CSS collegato alla pagina;
• posizionare il codice HTML dello slider nel punto richiesto della pagina;
• inserisci il codice JavaScript nella pagina o in un file js collegato alla pagina.

Si consiglia di ridurre al minimo il codice CSS e JavaScript; questa azione ne fornirà di più caricamento veloce pagine.

Come sviluppare un semplice slider per un sito web (senza loop)

Creazione di uno slider capoSlider sarà composto da Creazione HTML codice, CSS e JavaScript (senza jQuery).

Codice HTML del dispositivo di scorrimento capoSlider:

Come puoi vedere, lo slider ha un'architettura HTML molto semplice. Si inizia con il blocco principale, che ha una classe slider. Questo blocco è composto da 3 elementi.

Il primo elemento è .slider__wrapper . Funziona come wrapper per gli elementi .slider__item (diapositive).

I restanti due elementi (.slider__control) rappresentano visivamente i pulsanti. Verranno utilizzati per navigare nella diapositiva, ad es. passare agli elementi precedenti e successivi.

Codice CSS per lo slider chiefSlider:

/* STILI PRINCIPALI */ .slider ( posizione: relativa; overflow: nascosto; ) .slider__wrapper ( display: flex; transizione: trasformazione 0,6 s facilità; /* 0,6 durata del cambio diapositiva in secondi */ ) .slider__item ( flex: 0 0 50%; /* definisce il numero di diapositive attive (in questo caso 2 */ larghezza massima: 50%; /* definisce il numero di diapositive attive (in questo caso 2 */ ) /* STILI PER I PULSANTI INDIETRO E AVANTI * / .slider__control ( posizione: assoluta; visualizzazione: none; superiore: 50%; trasformazione: TranslateY(-50%); align-items: centro; giustifica-contenuto: centro; allineamento testo: centro; larghezza: 40px; /* larghezza del pulsante */ altezza: 50px; /* altezza del pulsante */ opacità: .5; /* trasparenza */ sfondo: #000; /* colore di sfondo */ ) .slider__control_show ( display: flex; ) .slider__control:hover, . slider__control:focus ( decorazione del testo: none; contorno: 0; opacità: .9; /* trasparenza */ ) .slider__control_left ( sinistra: 0; ) .slider__control_right ( destra: 0; ) .slider__control::before ( contenuto: " "; display: blocco in linea; larghezza: 20px; /* larghezza dell'icona (freccia) */ altezza: 20px; /* altezza dell'icona (freccia) */ sfondo: centro trasparente senza ripetizione; dimensione dello sfondo: 100% 100%; ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Come puoi vedere, lo è anche il codice CSS dello slider non molto complicato. Definizioni di base con cui è possibile configurare aspetto dispositivo di scorrimento, fornito di commenti.

Codice CSS che definisce numero di elementi attivi:

/* definisce il numero di diapositive attive (in questo caso 2) */ flex: 0 0 50%; larghezza massima: 50%;

Questo codice imposta il numero di elementi attivi per lo slider su 2.

Affinché il dispositivo di scorrimento, ad esempio, abbia un elemento attivo, tali definizioni devono essere modificate come segue:

/* definisce il numero di diapositive attive (in questo caso 1) */ flex: 0 0 100%; larghezza massima: 100%;

Creazione cursore adattivo effettuata tramite media query.

Ad esempio, uno slider, che sui dispositivi con uno schermo piccolo dovrebbe avere una diapositiva attiva e su quelli grandi - quattro:

Slider__item (flessione: 0 0 100%; larghezza massima: 100%;) @media (larghezza minima: 980px) ( .slider__item (flessione: 0 0 25%; larghezza massima: 25%; ))

Codice JavaScript per lo slider chiefSlider:

"usa rigoroso"; var multiItemSlider = (function () ( funzione di ritorno (selettore) ( var _mainElement = document.querySelector(selector), // elemento del blocco principale _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // wrapper for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elementi (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // controlla _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // pulsante "SINISTRA" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // pulsante "DESTRA" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // larghezza del wrapper _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / larghezza di un elemento _positionLeftItem = 0, // posizione dell'elemento attivo sinistro _transform = 0, // valore di trasformazione.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // dimensione del passo (per la trasformazione) _items = ; // array di elementi // riempiono l'array _items _sliderItems.forEach(funzione (elemento, indice) ( _items.push(( elemento: elemento, posizione: indice, trasformazione: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = funzione (direzione) ( if (direzione === "destra") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= posizione .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direzione === "sinistra") ( if (_positionLeftItem<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

L'azione principale nel codice JavaScript viene eseguita dalla funzione _transformItem. Questa funzione, a seconda della direzione che le viene passata, trasforma l'elemento.slider__wrapper.

Inizializzazione dello slider effettuato come segue:

Var slider = multiItemSlider(".slider") Demo dello slider

Come creare uno slider in loop?

È possibile eseguire il looping delle diapositive trasformando gli elementi .slider__item.

Per fare ciò, è necessario associare i valori della sua posizione corrente e trasformazione a ciascun element.slider__item.

Queste azioni possono essere eseguite in modo ottimale utilizzando l'array _items:

Elementi_var = ; // riempiendo l'array con elementi.slider__item _sliderItems.forEach(funzione (elemento, indice) ( _items.push(( elemento: elemento, posizione: indice, trasformazione: 0 )); ));

Ma puoi associare i dati agli elementi non solo utilizzando un array, ma, ad esempio, utilizzando gli attributi dei dati. Ma le operazioni DOM sono le più lente e richiedono più risorse e non sono consigliate quando possono essere eseguite in altro modo.

Il passaggio successivo è creare funzioni per calcolare .slider__item con la posizione minima e massima.

Posizione var = ( getItemMin: funzione () ( var indiceItem = 0; _items.forEach(funzione (elemento, indice) ( if (elemento.posizione< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indiceArticolo = indice; ) )); ritorna indiceArticolo; ), getMin: funzione () ( return _items.posizione; ), getMax: funzione () ( return _items.posizione; ) )

Ultimo passaggio fondamentale ciò che bisogna fare è modificare la funzione _transformItem. Vale a dire, aggiungi del codice che cambierà la posizione dell'elemento .slider__oggetto e procedere alla sua trasformazione.

Var _transformItem = funzione (direzione) ( var nextItem; if (direzione === "destra") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (direzione === "sinistra") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

In effetti, qui tutto è semplice.
Ad esempio, per passare alla diapositiva successiva, nell'array degli elementi viene prima cercato un elemento con una posizione maggiore di quella dell'elemento corrente più a destra.slider__item.
Se nell'array è presente un elemento di questo tipo, viene eseguita la trasformazione di element.slider__wrapper (ovvero azioni, come nell'algoritmo senza loop).
Ma se non esiste un elemento del genere, quindi oltre atransformation.slider__wrapper, vengono eseguite una serie di altre azioni.  Innanzitutto, viene cercato un elemento nell'array degli elementi con posizione minima.  Dopo aver ricevuto questo oggetto, lui viene impostata una posizione il cui valore sarà pari al valore dell'elemento destro corrente + 1.  E ovviamente lo fa la sua trasformazione, di una percentuale tale da finire alla fine, cioè  dopo l'ultimo elemento.

Per passare alla diapositiva precedente vengono eseguite azioni simili, ma al contrario.

Inoltre, per un dispositivo di scorrimento in loop, non è necessario alternare la visibilità dei pulsanti Sinistra e Destra.  Questi pulsanti in questa versione dello slider verranno sempre visualizzati.
Per fare questo è necessario:
rimuovere la classe slider__control_show dal controllo "Destra";
 
nel CSS per selector.slider__control modificare il valore della proprietà di visualizzazione in flex .
 Dimostrazione del dispositivo di scorrimento 
Come creare uno slider con looping e cambio automatico della slide?
È possibile programmare i cambi automatici delle diapositive a determinati intervalli utilizzando la funzione setInterval.
Var _cycle = funzione (direzione) ( if (!_config.isCycling) ( return; ) _interval = setInterval(funzione () ( _transformItem(direzione); ), _config.interval); )
La funzione setInterval in questo esempio eseguirà la funzione _transformItem a intervalli specificati pari al valore della variabile _config.interval.
Inoltre, è consigliabile aggiungere un arresto al cambio automatico delle diapositive quando si sposta il cursore sullo slider.
È possibile implementare questa funzionalità come segue:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", funzione () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", funzione () ( clearInterval(_interval); _cycle( _config.direzione); )); )
Come interrompere il cambio automatico della diapositiva se l'elemento non è visibile all'utente?
È consigliabile disattivare il cambio automatico delle diapositive in due casi:
quando la pagina (su cui si trova questo cursore) è inattiva;
 
quando il cursore è fuori dall'area di visibilità della pagina.
Il primo caso può essere gestito utilizzando l'evento visibilitàchange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Funzione per il gestore eventi visibilitàcambia:
// gestione dell'evento "Modifiche alla visibilità del documento" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Il calcolo della visibilità di un elemento può essere effettuato utilizzando la funzione _isElementVisible:
Funzione _isElementVisible(elemento) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = funzione (x, y) ( return document.elementFromPoint(x, y); ); if (rect.right< 0 || rect.bottom < 0 || rect.left >vLarghezza ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
È possibile inserire la chiamata _isElementVisible, ad esempio, all'inizio della funzione _transformItem.  Questa azione annullerà la transizione automatica della diapositiva se il dispositivo di scorrimento è attualmente fuori dalla finestra.
Var _transformItem = funzione (direzione) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Dispositivo di scorrimento che risponde al ridimensionamento della finestra del browser
Questa versione dello slider adattivo differisce dalle precedenti in quanto lo consente modificare il numero di elementi attivi (diapositive) durante il ridimensionamento della finestra del browser.  Gli utenti di solito non ridimensionano il browser, ma può comunque succedere.
Questo viene implementato utilizzando l'evento resize e l'array _states.  L'array viene utilizzato per i calcoli.  Il suo utilizzo consentirà di evitare di reinizializzare lo slider quando non è necessario.
Il tempo non si ferma e con esso il progresso.  Ciò ha influenzato anche Internet.  Puoi già vedere come sta cambiando l'aspetto dei siti web; il design adattivo è particolarmente popolare.  E a questo proposito ne sono apparsi parecchi nuovi cursori jquery adattivi, gallerie, caroselli o plugin simili. 
1. Dispositivo di scorrimento dei post orizzontali reattivi
Carosello orizzontale adattivo con istruzioni dettagliate sull'installazione.  È realizzato in uno stile semplice, ma puoi modellarlo secondo le tue esigenze.
2. Dispositivo di scorrimento su Glide.js
Questo dispositivo di scorrimento è adatto a qualsiasi sito Web.  Utilizza Glide.js open source.  I colori del cursore possono essere facilmente modificati.
3. Presentazione del contenuto inclinato
Dispositivo di scorrimento dei contenuti reattivi.  Il punto forte di questo slider è l'effetto 3D delle immagini, nonché diverse animazioni dall'aspetto casuale.
4. Dispositivo di scorrimento che utilizza tela HTML5
Uno slider molto bello e impressionante con particelle interattive.  È stato realizzato utilizzando tela HTML5,
5. Dispositivo di scorrimento per la trasformazione delle immagini
Slider con effetto morphing (trasformazione fluida da un oggetto all'altro).  In questo esempio, lo slider è adatto per il portfolio di uno sviluppatore web o di uno studio web sotto forma di portfolio.
6. Cursore circolare
Dispositivo di scorrimento a forma di cerchio con l'effetto di capovolgere l'immagine.
7. Dispositivo di scorrimento con sfondo sfocato
Dispositivo di scorrimento adattivo con commutazione e sfocatura dello sfondo.
8. Dispositivo di scorrimento della moda reattivo
Dispositivo di scorrimento del sito Web semplice, leggero e reattivo.
9. Slicebox: cursore immagine 3D jQuery(AGGIORNATO)
Versione aggiornata dello slider Slicebox con correzioni e nuove funzionalità.
10.Griglia di immagini reattive animate gratuite
Plugin JQuery per creare una griglia di immagini flessibile che cambierà gli scatti utilizzando animazioni e tempi diversi.  Questo può avere un bell'aspetto come sfondo o elemento decorativo su un sito Web, poiché possiamo visualizzare selettivamente nuove immagini e le loro transizioni.  Il plugin è disponibile in diverse versioni.
11. Cursore flessibile
universale plug-in gratuito per il tuo sito web.  Questo plugin è disponibile in diverse opzioni slider e carosello.
12. Cornice per foto
Fotoramaè un plugin universale.  Ha molte impostazioni, tutto funziona in modo rapido e semplice e puoi visualizzare le diapositive a schermo intero.  Lo slider può essere utilizzato sia a dimensione fissa che adattiva, con o senza miniature, con o senza scorrimento circolare e molto altro.
PSHo installato lo slider più volte e penso che sia uno dei migliori
13. Galleria di slider 3D gratuita e adattiva con miniature.
Dispositivo di scorrimento della galleria sperimentale Layout del pannello 3DPanel con una griglia e interessanti effetti di animazione.
14. Dispositivo di scorrimento su css3
Lo slider adattivo è realizzato utilizzando CSS3 con un aspetto uniforme del contenuto e un'animazione leggera.
15. Cursore WOW
Cursore WOWè uno slider di immagini con effetti visivi sorprendenti.
17. Elastico
Dispositivo di scorrimento elastico con reattività completa e miniature di diapositive.
18. Spacco
Questo è uno slider reattivo a schermo intero che utilizza l'animazione CSS3.  Lo slider è realizzato in due versioni.  L'animazione è realizzata in modo piuttosto insolito e bello.
19. Galleria fotografica adattiva plus
Un semplice cursore della galleria gratuito con caricamento delle immagini.
20. Dispositivo di scorrimento reattivo per WordPress
Dispositivo di scorrimento gratuito adattivo per WP.
21. Dispositivo di scorrimento del contenuto parallasse
Slider con effetto parallasse e controllo di ogni elemento tramite CSS3.
22. Dispositivo di scorrimento con collegamento musicale
Dispositivo di scorrimento utilizzando aperto codice sorgente JPlayer.  Questo cursore ricorda una presentazione con musica.
23. Dispositivo di scorrimento con jmpress.js
Lo slider reattivo è basato su jmpress.js e ti permetterà quindi di aggiungere alcuni interessanti effetti 3D alle tue diapositive.
24. Presentazione rapida al passaggio del mouse
Presentazione con cambio rapido delle diapositive.  Le diapositive si attivano al passaggio del mouse.
25. Fisarmonica di immagini con CSS3
Fisarmonica di immagini utilizzando css3.
26. Un plugin per la Galleria ottimizzato per il tocco
Questa è una galleria reattiva ottimizzata per i dispositivi touch.
27. Galleria 3D
Galleria a muro 3D- creato per Navigatore Safari, dove sarà visibile l'effetto 3D.  Se lo guardi su un altro browser, la funzionalità andrà bene ma l'effetto 3D non sarà visibile.
28. Dispositivo di scorrimento con impaginazione
Dispositivo di scorrimento reattivo con impaginazione tramite dispositivo di scorrimento dell'interfaccia utente JQuery.  L'idea è quella di utilizzare un semplice concetto di navigazione.  È possibile riavvolgere tutte le immagini o scorrere diapositiva per diapositiva.
29.Montaggio di immagini con jQuery
Disporre automaticamente le immagini in base alla larghezza dello schermo.  Una cosa molto utile quando si sviluppa un sito Web di portfolio.
30. Galleria 3D
Un semplice slider circolare 3D che utilizza css3 e jQuery.
31. Modalità a schermo intero con effetto 3D utilizzando css3 e jQuery
Uno slider con la possibilità di visualizzare immagini a schermo intero con una bellissima transizione.

 
Raccolta gratuita Dispositivo di scorrimento HTML e CSS esempi di codice: scheda, confronto, schermo intero, reattivo, semplice, eccetera.  Aggiornamento della collezione giugno 2018.  7 nuovi articoli.
Sommario
 
articoli Correlati


 
A proposito del codice
 

 
Una serie di schermate di onboarding in HTML/CSS/JS.  Un esperimento personale con la sovrapposizione di icone PNG, transizioni CSS3 e flexbox.
 

Dispositivo di scorrimento della scheda informativa HTML, CSS e JavaScript. 
Realizzato da Andy Tran 
23 novembre 2015

Dispositivo di scorrimento delle foto che funziona su browser desktop e mobili. 
Realizzato da Taron 
29 settembre 2014
Cursori di confronto (prima/dopo).
 
A proposito del codice
 

 
Uno slider per il confronto delle immagini semplice e pulito, completamente reattivo e pronto per il tocco, realizzato con CSS e jQuery.
 
A proposito del codice
 

 
Uno slider prima e dopo con solo html e css.
 
A proposito del codice
 

 
Giocare con una nuova idea usando il mio cursore dell'immagine prima/dopo a due livelli.  Mantenerlo al minimo.  Tenendolo alla vaniglia.  Metti mi piace se è utile :)
 

Vanilla JS, minimale, bello da vedere. 
Realizzato da Huw 
3 luglio 2017
 
A proposito del codice
 

 
Un elemento di scorrimento "schermo diviso" con JavaScript.
 

Un piccolo esperimento per uno slider prima e dopo tutto all'interno di un SVG.  Il mascheramento lo rende piuttosto semplice.  Dato che è tutto SVG, le immagini e le didascalie si adattano perfettamente insieme.  I plugin Draggable e ThrowProps di GreenSock sono stati utilizzati per il controllo del cursore. 
Realizzato da Craig Roblewsky 
17 aprile 2017

Utilizza l'input dell'intervallo personalizzato per il dispositivo di scorrimento. 
Realizzato da Dudley Storey 
14 ottobre 2016

Dispositivo di scorrimento reattivo per il confronto delle immagini con HTML, CSS e JavaScript. 
Realizzato da Ege Görgülü 
3 agosto 2016

Cursore di confronto prima e dopo video HTML5, CSS3 e JavaScript. 
Realizzato da Dudley Storey 
24 aprile 2016

Un pratico cursore trascinabile per confrontare rapidamente 2 immagini, basato su CSS3 e jQuery. 
Realizzato da CodyHouse 
15 settembre 2014
Slider a schermo intero
 
A proposito del codice
 

 
Dispositivo di scorrimento semplice basato sugli ingressi radio.  HTML + CSS puri al 100%.  Funziona anche con i tasti freccia.
 
 
Reattivo: sì
 
Dipendenze: -
 
A proposito del codice
 

 
Simpatico effetto di transizione per il dispositivo di scorrimento a schermo intero.
 
A proposito del codice
 

 
Cursore scorrevole con parallasse orizzontale con Swiper.js.
 
A proposito del codice
 

 
Dispositivo di scorrimento della prospettiva 3D fluido e reattivo al movimento del mouse.
 

Dispositivo di scorrimento dell'immagine dell'eroe a schermo intero (tema dei pannelli di scorrimento) con HTML, CSS e JavaScript. 
Realizzato da Tobias Bogliolo 
25 giugno 2017

Un'interazione con il dispositivo di scorrimento che utilizza gli effetti Velocity ed Velocity (UI Pack) per migliorare l'animazione.  L'animazione viene attivata tramite i tasti freccia, il clic di navigazione o il jack di scorrimento.  Questa versione include i bordi come parte dell'interazione. 
Realizzato da Stephen Scaff 
11 maggio 2017

Dispositivo di scorrimento semplice in uno stile minimale per mostrare le immagini.  Parte dell'immagine viene visualizzata su ciascuna diapositiva. 
Realizzato da Nathan Taylor 
22 gennaio 2017

La cosa è abbastanza facile da personalizzare.  Puoi modificare in sicurezza il carattere, la dimensione del carattere, il colore del carattere, la velocità dell'animazione.  La prima lettera di una nuova stringa nell'array in JS apparirà su una nuova diapositiva.  Facile creare (o eliminare) una nuova diapositiva: 1. Aggiungi una nuova città nell'array in JS.  2. Modifica il numero di variabili delle diapositive e inserisci una nuova immagine nell'elenco scss in CSS. 
Realizzato da Ruslan Pivovarov 
8 ottobre 2016

Percorso clip per mascherare il bordo del rettangolo dell'immagine (solo webkit).
Modalità di fusione per questa maschera.
Sistema di colori intelligente, basta inserire il nome e il valore del colore nella mappa sass e quindi aggiungere la classe adeguata con questo nome di colore agli elementi e tutto funzionerà!
Fantastico menu laterale dei crediti (fai clic sul piccolo pulsante al centro della demo).
Vaniglia js con just< 200 lines of code (basically it’s just adds/removes classes).
 Realizzato da Nikolay Talanov 
7 ottobre 2016 

Questo slider inclinato con scorrimento basato su JS e CSS puri (senza librerie). 
Realizzato da Victor Belozyorov 
3 settembre 2016

Un'animazione slider con design Pokemon. 
Realizzato da Pham Mikun 
18 agosto 2016

Slider HTML, CSS e JavaScritp con animazione complessa e testo angolato semicollorato. 
Realizzato da Ruslan Pivovarov 
13 luglio 2016

Effetto parallasse slider con HTML, CSS e JavaScript. 
Realizzato da Manuel Madeira 
28 giugno 2016

Slider HTML, CSS e JavaScript con effetto a catena. 
Realizzato da Pedro Castro 
21 maggio 2016

Cursore rivelatore Clip-Path con HTML, CSS e JavaScript. 
Realizzato da Nikolay Talanov 
16 maggio 2016

GSAP + Dispositivo di scorrimento Slick con anteprima delle diapositive precedenti/successive. 
Realizzato da Karlo Videk 
27 aprile 2016

Dispositivo di scorrimento della pagina intera HTML, CSS e JavaScript. 
Realizzato da Giuseppe Martucci 
28 febbraio 2016

Prototipo di slider completo con HTML, CSS e JavaScript. 
Realizzato da Gluber Sampaio 
6 gennaio 2016

Una presentazione a schermo intero, una sorta di reattività, animata con Greensocks TweenLite/Tweenmax. 
Realizzato da Arden 
12 dicembre 2015
 Realizzato da Arden 
5 dicembre 2015 

Dispositivo di scorrimento a schermo intero (sequenza temporale GSAP) n. 1 con HTML, CSS e JavaScript. 
Realizzato da Diaco M.Lotfollahi 
23 novembre 2015

Slider HTML e CSS con effetti personalizzati. 
Realizzato da Nikolay Talanov 
12 novembre 2015

Drag-slider a schermo intero con parallasse con HTML, CSS e JavaScript. 
Realizzato da Nikolay Talanov 
12 novembre 2015

Cursore rotante di prova del concetto.  Utilizza clip-path e molta matematica. 
Realizzato da Tyler Johnson 
16 aprile 2015

Un semplice slider CSS e jQuery a schermo intero che utilizza TranslateX e la fluidità di Translate3D! 
Realizzato da Giuseppe 
19 agosto 2014
Slider reattivi
 
A proposito del codice
 
Dispositivo di scorrimento dell'opacità delle immagini
 
Dispositivo di scorrimento dell'opacità delle immagini in HTML e CSS.
 
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
 
Reattivo: sì
 
Dipendenze: -
 
A proposito del codice
 
Layout di diapositive flessibili impilate
 
Questo esempio illustra come creare un layout di diapositive impilate l'una sull'altra (particolarmente utile per le transizioni con dissolvenza in entrata/uscita).  Si ottiene senza impostarne l'altezza ed evitando la posizione: assoluta; quindi sono completamente flessibili e facili da mantenere nel normale flusso della pagina.
 
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
 
Reattivo: sì
 
Dipendenze: -
 
A proposito del codice
 
Dispositivo di scorrimento reattivo
 
Slider reattivo animato in HTML, CSS e JavaScript.
 
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
 
Reattivo: sì
 
Dipendenze: animate.css
 
A proposito del codice
 
Dispositivo di scorrimento con testo mascherato
 
Dispositivo di scorrimento solo CSS con testo mascherato.
 
Browser compatibili: Chrome, Edge (parziale), Firefox, Opera, Safari
 
Reattivo: sì
 
Dipendenze: -
 
A proposito del codice
 

 
Immagine e contenuto con effetto di parallasse.
 
A proposito del codice
 

 
Galleria di diapositive solo CSS.
 
Browser compatibili: Chrome, Edge, Firefox, Opera, Safari
 
Reattivo: sì
 
Dipendenze: -
 
A proposito del codice
 
Dispositivo di scorrimento HTML/CSS puro
 
Dispositivo di scorrimento HTML/CSS puro con barra di avanzamento SVG circolare.
 
Browser compatibili: Chrome, Edge (parziale), Firefox (parziale), Opera, Safari
 
Reattivo: sì
 
Dipendenze: font-awesome.css
 
A proposito del codice
 

 
Un esperimento per creare uno slider verticale completamente reattivo con miniature utilizzando solo CSS e mantenendo le proporzioni delle immagini.
 
A proposito del codice
 

 
Un semplice cursore/carosello di immagini Flexbox realizzato con JavaScript vanilla.
 
A proposito del codice
 

 
Questo è un esperimento che simula un effetto di motion blur ogni volta che si cambia diapositiva.  Sfrutta il filtro Sfocatura gaussiana SVG e alcune animazioni di fotogrammi chiave CSS.  Sebbene l'effetto non richieda Javascript per funzionare correttamente, in questo esempio Javascript viene utilizzato solo per la funzionalità del dispositivo di scorrimento.
 
A proposito del codice
 

 
Fantastico cursore animato con JS.
 
A proposito del codice
 

 
Questo è un esperimento su come i pattern SVG possono aiutarci a creare immagini simili a maschere per uno slider di immagini solo CSS.
 

Esplorando alcune transizioni del dispositivo di scorrimento.  Dispositivo di scorrimento dello scorrimento con opzione parallasse abilitata.  Giocando con i filtri CSS principalmente qui. 
Realizzato da Mirko Zorić 
12 giugno 2017

Semplice dispositivo di scorrimento GSAP con alcune sottili animazioni di interpolazione. 
Realizzato da Goran Vrban 
9 giugno 2017

Interfaccia utente a scorrimento con HTML, CSS e JavaScript. 
Realizzato da Mergim Ujkani 
6 giugno 2017

Dispositivo di scorrimento GSAP versione 2. 
Realizzato da Em An 
4 maggio 2017

Un piccolo dispositivo di scorrimento della transizione che utilizza un semplice accordo di aggiunta classe.  È necessario appianare un po' i tempi e decidere l'approccio migliore per i dispositivi mobili (basta impilare, aggiungere eventi touch, rendere le immagini completamente visibili, ecc. Supporta la rotella di scorrimento (scroll jacking), i pulsanti di navigazione e i tasti freccia. Può anche aumentare il wrapper del contenuto per fare in modo che le immagini riempiano la finestra nel loro stato non animato, il che è altrettanto interessante. 
Realizzato da Stephen Scaff 
3 gennaio 2017

Sfrutta l'immagine del bordo CSS e il percorso della clip per creare un effetto di animazione del cursore. 
Realizzato da Emily Hayman 
31 dicembre 2016

Piccolo slider costruito con flexbox.  Abbastanza reattivo e può avere elementi fissi accanto all'area del dispositivo di scorrimento. 
Realizzato da Roberto 
28 novembre 2016

Dispositivo di scorrimento tela HTML e CSS. 
Realizzato da Nvagelis 
29 ottobre 2016

Dispositivo di scorrimento fluido 3D HTML, CSS e JavaScript. 
Realizzato da Eduardo Allegrini 
19 ottobre 2016

Slider cupcake HTML e CSS con confettini! 
Realizzato da Jamie Coulter 
14 ottobre 2016


Realizzato da Mario's Maselli 
12 ottobre 2016

Esplorazione dell'animazione dell'interfaccia utente n. 2 con HTML, CSS e JavaScript. 
Realizzato da Mario's Maselli 
22 settembre 2016

Esplorazione dell'animazione dell'interfaccia utente n. 3 con HTML, CSS e JavaScript. 
Realizzato da Mario's Maselli 
22 settembre 2016

Slider e-commerce v2.0 con HTML, CSS e JavaScript. 
Realizzato da Pedro Castro 
17 settembre 2016

Cursore pulito HTML, CSS e JavaScript con sfondo curvo. 
Realizzato da Ruslan Pivovarov 
13 settembre 2016

Esplorazione dell'animazione dell'interfaccia utente n. 1 con HTML, CSS e JavaScript. 
Realizzato da Mario's Maselli 
8 settembre 2016

Goditi la potenza dei CSS: su e giù per ogni immagine centrale e cursore impaginato con lightbox. 
Realizzato da Kseso 
15 agosto 2016

La doppia esposizione è una tecnica fotografica che unisce 2 immagini diverse in un'unica immagine. 
Realizzato da Misaki Nakano 
3 agosto 2016

Dispositivo di scorrimento che utilizza la clip delle proprietà CSS3. 
Realizzato da Pedro Castro 
1 maggio 2016

Dispositivo di scorrimento CSS reattivo. 
Realizzato da geekwen 
19 aprile 2016

Questo è un semplice esperimento con un cursore che mostra parole con significati meravigliosi che non possono essere tradotti direttamente.  Focus: tipografia elegante e transizioni semplici ma seducenti. 
Realizzato da Joe Harry 
5 aprile 2016

L'idea dell'animazione è modificare il valore del percorso del clip CSS, creando così un effetto di mascheramento. 
Realizzato da Bhakti Al Akbar 
31 marzo 2016

Dispositivo di scorrimento punto con HTML, CSS e JavaScript. 
Realizzato da Derek Nguyen 
16 marzo 2016

Slider effetto prisma con HTML, CSS e JavaScript. 
Fatto da Vittorio 
12 marzo 2016

Galleria di sfondi scorrevole con HTML, CSS e JavaScript. 
Realizzato da Ron Gierlach 
30 novembre 2015

Soluzione slider HTML, CSS e JavaScript. 
Realizzato da Jürgen Genser 
30 settembre 2015

Uno slider del prodotto basato su Sequence.js.  Sequence.js: il framework di animazione CSS reattivo per la creazione di slider, presentazioni, banner e altre applicazioni basate su passaggi unici. 
Realizzato da Ian Lunn 
15 settembre 2015

Cursore personalizzato a forma di piccolo cerchio. 
Realizzato da Bram de Haan 
11 agosto 2015

Slider GTA V reattivo con HTML, CSS e JavaScript. 
Realizzato da Eduard Mayer 
24 gennaio 2014

È come un cursore ma ruota in modo cubico per ragioni sconosciute. 
Realizzato da Eric Brewer 
4 dicembre 2013

Realizzato da Hugo DarbyBrown 
28 agosto 2013
Slider semplici

Dispositivo di scorrimento per sovrapposizione immagini con HTML, CSS e JavaScript vanilla. 
Realizzato da Yugam 
7 giugno 2017

Dispositivo di scorrimento delle immagini in evidenza HTML e CSS. 
Realizzato da Joshua Hibbert 
16 giugno 2016
Dispositivo di scorrimento immagini multiasse
Slider di immagini multiasse con HTML, CSS e JavaScript. 
Realizzato da Burak Can 
22 luglio 2013

Cube slider, un piccolo esperimento con trasformazioni 3D HTML5/CSS3. 
Realizzato da Ilya K. 
26 giugno 2013
Dall'autore: Nonostante le voci sulla presunta “morte” della parte delle pagine web visibile senza scorrimento, la necessità di un buon slider non è scomparsa.  Siamo onesti per un secondo: gli slider sono divertenti.  Inoltre, nient’altro, a differenza dei contenuti in movimento, provoca un effetto “wow” nell’utente.  Tutti gli slider sono un insieme di più diapositive che si sostituiscono a vicenda ed è estremamente importante che il codice dello slider sia il più leggero possibile.  È in questi casi che jQuery ci aiuterà.
 
Dai un'occhiata ai 20 slider jQuery di Envato Market e ti renderai conto che ci sono slider che sono più di un semplice blocco di immagini che scorrono agevolmente attraverso di essi.
 
1. RoyalSlider: galleria di immagini touchscreen che utilizza jQuery
 
Al giorno d'oggi, uno slider reattivo che sia anche compatibile con il touchscreen significa molto più di prima.  RoyalSlider combina entrambe le caratteristiche: reattività e funzionalità touch screen.  Una buona scelta poiché la galleria è scritta in HTML5 e CSS3.
 
 
Diverse caratteristiche interessanti:
 
Come creare un sito web da solo?
  
Ottimizzazione SEO
 
Altamente personalizzabile
 
Più di 10 modelli iniziali
 
Esiste un fallback per le transizioni CSS3
 
Secondo me, la caratteristica più interessante è l '"architettura modulare degli script", che consente di escludere cose non necessarie dal file JS principale, riducendo così il peso.  RoyalSlider, una galleria di immagini touchscreen in JQuery, è un robusto slider JavaScript che dovrebbe essere aggiunto al toolkit di qualsiasi sviluppatore.
 
2. Plug-in jQuery reattivo di Slider Revolution
 
Non è così facile fare qualcosa di "rivoluzionario" con uno slider.  Quando si tratta di slider, ci sono così tante funzionalità che puoi aggiungervi.  Tuttavia, Slider Revolution è davvero un ottimo tentativo.  Tra gli slider jQuery, questa istanza soddisfa tutti i tuoi possibili requisiti.
 
 
L'elenco delle funzionalità dello slider è così ampio, quindi elencherò solo le migliori:
 
Effetto parallasse e animazione personalizzata
 
Numero illimitato di livelli e diapositive con collegamenti
 
stili pronti all'uso e profondamente personalizzabili
 
e altro ancora
 
Possibilità di aggiungere un'immagine, un lettore video incorporato e collegamenti da social networks rende Slider Revolution una delle opzioni più flessibili e personalizzabili sul web.
 
3. Plug-in slider jQuery adattivo LayerSlider
 
Il nome "plug-in slider jQuery adattivo LayerSlider" non può veramente valutare questo slider. 
Oltre 200 transizioni 2D e 3D tra le diapositive faranno girare la testa a chiunque.
 
 
Un paio di caratteristiche degne di nota:
 
13 skin e 3 tipi di menu
 
Possibilità di posizionare un'immagine fissa sopra il cursore
 
E jQuery fallback
 
E altro ancora
 
Come con il dispositivo di scorrimento precedente, puoi aggiungere quasi tutti i contenuti, anche i contenuti multimediali residenti in HTML5.  LayerSlider dà vita agli slider ed è molto carino.
 
4. Rotatore/presentazione banner jQuery
 
jQuery Banner Rotator / Slideshow è uno slider abbastanza semplice che non sacrifica la funzionalità principale.
 
 
Possibilità:
 
Suggerimenti, inserti di testo, ecc.
 
Anteprime e varie opzioni per la visualizzazione dei componenti
 
Timer con ritardo per uno slider o tutti
 
Transizioni multiple per tutte le diapositive o transizioni diverse per ciascuna singolarmente
 
jQuery Banner Rotator / Slideshow, rispetto ad altri slider JQuery, ha solo funzionalità di base, ma non dovresti dimenticartene.
 
5. Slider tutto in uno: plugin per slider jQuery reattivo
 
Qualsiasi dispositivo di scorrimento che appare su Internet ha una sua visione unica e risolve qualsiasi problema nel suo campo.  Ma non questo.  All In One Slider può essere chiamato “tutto compreso”.
 
 
Penso che la maggior parte degli sviluppatori e designer web abbiano una soluzione comprovata, ma sono sempre alla ricerca di qualcosa di nuovo.  E questo “qualcosa di nuovo” comprende:
 
Rotatore di striscioni
 
Banner con anteprima
 
Banner con playlist
 
Dispositivo di scorrimento del contenuto
 
Giostra
 
Tutti i tipi di slider supportano la maggior parte, se non tutte, delle funzionalità richieste dagli slider jQuery.  All In One Slider sarà il tuo tutto compreso?
 
6. UnoSlider – Dispositivo di scorrimento touchscreen adattivo
 
Se il tuo slider non risponde e non supporta i touch screen, hai lo slider sbagliato.  UnoSlider ha ragione.
 
 
Questo slider ha trovato il suo posto al sole tra semplicità e un ricco set di funzioni.  Funzioni:
 
Supporto tematico
 
12 temi già pronti
 
40 transizioni
 
Supporto IE6+
 
Tutte le funzionalità con un'enfasi sul design e sullo stile, rendono UnoSlider un eccellente dispositivo di scorrimento dei contenuti con la possibilità di aggiungere temi.
 
7. Dispositivo di scorrimento principale: dispositivo di scorrimento del touchscreen jQuery
 
Cerchi "uno slider jQuery per domarli tutti"?  Prova Master Slider: slider touchscreen JQuery per diverse dimensioni dello schermo...
 
 
Quando si tratta di buon design, questa copia è una delle migliori:
 
Più di 25 modelli
 
Transizioni accelerate dall'hardware
 
Supporto touch e scorrimento
 
E altro ancora
 
Transizioni interattive, livelli animati e hotspot attireranno sicuramente la tua attenzione.  Master Slider è un'opera d'arte.
 
8. TouchCarousel: scroller e cursore del contenuto jQuery
 
TouchCarousel offre supporto e aggiornamenti gratuiti.  Tuttavia, non sono tutte le funzionalità di questo leggero slider a carosello jQuery.
 
 
Se nel nome è presente la parola "tocco", puoi immaginare che lo slider sia completamente adattivo e supporti i tocchi.  Altre caratteristiche:
 
Ottimizzazione SEO
 
Riproduzione automatica intelligente
 
Transizioni CSS3 con accelerazione hardware
 
Interfaccia utente personalizzabile e 4 skin per Photoshop
 
TouchCarousel, grazie al suo esclusivo scorrimento fisico delle diapositive, porta le esperienze mobili a un livello completamente nuovo.
 
9. Dispositivo di scorrimento avanzato: dispositivo di scorrimento XML jQuery
 
Gli slider jQuery possono essere utilizzati non solo sui siti web.  Possono anche essere utili nelle applicazioni web.  Advanced Slider ti consente di farlo.
 
 
Con il markup HTML o XML, questo dispositivo di scorrimento avanzato lascia un'impressione duratura:
 
Livelli animati e video intelligenti
 
Oltre 100 transizioni e oltre 150 proprietà personalizzate
 
15 skin per slider, 7 skin per barra di scorrimento e supporto lightbox integrato
 
Navigazione tramite tastiera, supporto touch e personalizzazione completa
 
E altro ancora
 
Tuttavia, il massimo caratteristica migliore Questo Advanced Slider è un'API jQuery XML Slider che rende lo slider un'opzione ideale per la tua applicazione web.
 
10. Effetto zoom avanti/indietro jQuery Slider completamente reattivo
 
Uno di quegli slider jQuery che ti faranno guardare una demo prima di iniziare a leggere le sue funzionalità.  Vuoi solo capire cosa significa questo "effetto zoom avanti/indietro".
 
 
L'effetto zoom è piuttosto debole, ma aggiunge un senso di controllo e un tocco reale all'immagine mentre il resto del cursore è statico.  Particolarità dello slider:
 
Transizioni di livello CSS3
 
Opzione di fine animazione per i livelli
 
Opzioni a larghezza fissa, schermo intero e larghezza intera
 
Testo animato con formattazione HTML e CSS
 
La maggior parte degli slider cerca di incorporare quanti più effetti possibili, ma jQuery Slider Zoom In/Out Effect Fully Responsive ha solo l'effetto Ken Burns, ma è ben implementato.
 
11. Evoluzione del carosello jQuery
 
Come il già citato Advanced Slider - jQuery XML Slider, jQuery Carousel Evolution ha una propria API che può essere utilizzata per migliorare la funzionalità o integrare lo slider in un altro progetto.
 
Come creare un sito web da solo?
 
Quali tecnologie e conoscenze sono necessarie oggi per creare siti web in autonomia?  Scoprilo durante l'intensivo!
 
 
Con immagini, markup HTML, video YouTube e Vimeo riceverai anche:
 
Ottimizzazione SEO
 
9 stili di carosello
 
Effetti di ombra e riflessione
 
La dimensione dell'immagine può essere regolata, sia davanti che dietro
 
jQuery Carousel Evolution è un semplice carosello con molti casi d'uso.
 
12. Cursore sexy
 
Sexy Slider non è più sexy come prima.  Tuttavia, data la sua età, questo slider è affidabile.
 
 
Lo slider non sembra molto impressionante a prima vista, ma se lo personalizzi bene, si adatterà perfettamente al tuo design.  Possibilità:
 
Diapositive a riproduzione automatica
 
Didascalie delle immagini
 
Riproduzione continua di diapositive
 
6 effetti di transizione
 
Sexy Slider ti sta aspettando per sbloccare tutta la sua potenza e il suo potenziale.
 
13. Scorritore di immagini e contenuti jQuery con lightbox
 
Con tutti questi design ottimizzati per i dispositivi mobili e il supporto touchscreen, è bello vedere uno slider jQuery che non si è dimenticato dei computer desktop.
 
 
jQuery Image & Content Scroller con Lightbox supporta l'input da tastiera e la rotellina del mouse, oltre ad altre funzionalità:
 
Orientamento orizzontale e verticale
 
Didascalie di testo all'interno o all'esterno del dispositivo di scorrimento
 
Possibilità di impostare un certo numero di diapositive visibili contemporaneamente
 
Immagini in linea, Flash, iframe, Ajax e contenuti in linea
 
Lo slider ha anche una lightbox integrata.  Se lo desideri, in jQuery Image & Content Scroller w/ Lightbox non puoi avviare lo slider stesso, ma avviare la lightbox separatamente.
 
14. Traslucido – Rotatore/slider adattivo del banner
 
La maggior parte degli slider jQuery ha un proprio design.  Puoi personalizzarlo da solo, ma a volte vuoi semplicemente che tutto sia all'interno del dispositivo di scorrimento.  Ti presentiamo Translucent.
 
 
Lo slider ha molte preimpostazioni.  Potrebbe essere necessario semplicemente impostare determinate impostazioni e il gioco è fatto.  Possibilità:
 
6 stili diversi
 
4 effetti di transizione
 
2 transizioni di scorrimento
 
Pulsanti e didascalie personalizzabili
 
Come gli altri, questo slider è sensibile al tocco, reattivo e con accelerazione hardware.  Traslucido – slider con design minimo, che mette in primo piano il contenuto stesso.
 
15. FSS - Plugin per siti Web scorrevoli a schermo intero
 
Vuoi realizzare un sito web a schermo intero composto da diapositive?  Allora hai bisogno di FSS.
 
 
In effetti, utilizzando questo slider JQuery è estremamente semplice creare un sito Web con slider a schermo intero.  Possibilità:
 
Supporto AJAX
 
Barra di scorrimento
 
Supporto della tecnologia di collegamento profondo
 
2 diversi effetti di transizione
 
Vale la pena prestare attenzione anche al supporto della tastiera e alla guida di 11 pagine.  Ma la vera impressione è il peso dell'FSS, solo 5Kb.
 
16. Zozo Accordion – Dispositivo di scorrimento touchscreen adattivo
 
Un altro esempio di slider jQuery che si concentra sullo stile e fa un buon lavoro.  Zozo Accordion è un must per chi cerca un buon slider per fisarmonica con la possibilità di cambiare stile.
 
 
Questa bellezza dell'animazione CSS3 ha anche una vasta gamma di funzionalità:
 
Fisarmonica orizzontale e verticale
 
Semantica HTML5 e ottimizzazione SEO
 
Supporto touch, tastiera e WAI-ARIA
 
Più di 10 skin e 6 layout
 
E altro ancora
 
Alla fisarmonica Zozo supporto gratuito e aggiornamenti costanti, oltre a tutte le funzionalità che desideri vedere in jQuery Accordion.
 
17. Plug-in jQuery OneByOne Slider reattivo
 
Il plugin jQuery Responsive OneByOne Slider è più simile a una semplice animazione che a uno slider.  Invece di visualizzare una diapositiva alla volta, questa istanza riempie lo schermo con le diapositive un passo alla volta fino a quando non rimane più spazio nell'area prima di passare alla diapositiva successiva.
 
 
L'animazione CSS3 funziona da Animate.css, è leggera, è composta da diversi livelli ed è facile da usare dispositivi mobili.  Molteplici funzionalità:
 
C'è anche un'opzione di navigazione drag and drop.  Il plug-in jQuery Responsive OneByOne Slider è basato su Twitter Bootstrap Carousel.
 
18. Fisarmonica - plugin jQuery
 
Non esiste uno slider jQuery più semplice di questo.  Per funzionare, è necessario scaricare solo 3Kb dello slider, il che rende Accordionza lo slider per fisarmonica più leggero.
 
 
Se non ti piacciono le tre opzioni di stile, puoi modificare tu stesso HTML e CSS.  Possibilità:
 
Navigazione tramite tastiera
 
Effetti e pulsanti facili da personalizzare
 
Tecnica di miglioramento progressivo: funziona senza JavaScript
 
Ricorda che Accordionza può visualizzare molte varianti di contenuti misti, rendendolo estremamente flessibile.
 
19. mightySlider – Dispositivo di scorrimento multiuso reattivo
 
MightySlider è uno slider davvero potente.  Può essere utilizzato non solo come semplice dispositivo di scorrimento delle immagini, ma anche come dispositivo di scorrimento unidirezionale a schermo intero con navigazione tra le voci di menu.  Con il suo aiuto puoi creare un meraviglioso sito web di una pagina.
 
 
Sotto il cofano troverai molte opzioni:
 
Supporto per tastiera, mouse e tocco
 
Transizioni CSS3 con accelerazione hardware
 
Markup valido e pulito e ottimizzazione SEO
 
Numero illimitato di diapositive, livelli per didascalie ed effetti per loro
 
L'API è molto potente e intuitiva per gli sviluppatori, il che si apre vari modi il suo utilizzo.  MightySlider è un eccellente slider jQuery progressivo con codice pulito e ben commentato.
 
20. Parallax Slider: plug-in jQuery reattivo
 
Parallax Slider funziona come il plug-in jQuery Responsive OneByOne Slider e ti consente di animare ogni livello separatamente all'interno di una singola diapositiva.  Puoi animare tutte le diapositive o anche solo una aggiungendo l'animazione parallasse.
 
 
Include 4 cursori tipi diversi, il tutto con effetto di parallasse.  Come altri slider jQuery, ha:
 
Completamente personalizzabile
 
Tocca il supporto
 
Livelli illimitati e completamente reattivi
 
Riproduzione automatica, looping, regolazione dell'altezza e della larghezza e timer
 
I livelli animati non riguardano solo testo o immagini.  Puoi anche aggiungere video YouTube, Vimeo e HTML5.  Parallax Slider - un altro buon esempio come puoi simulare gli effetti Flash anche meglio di Flash stesso, anch'essi supportati su tutti i dispositivi.
 
Conclusione
 
È interessante vedere come gli slider jQuery siano passati da qualcosa che semplicemente sostituiva un'immagine con un'altra a un vasto set di strumenti creativi.  Ora ci sono 3D, cursori di parallasse, cursori a pagina intera, cursori adattivi e quelli che possono essere visualizzati sia su computer desktop che su smartphone.
 
Se non ti è piaciuto nessuno degli slider di questo elenco, puoi sempre seguire il tutorial sul codice jQuery su Envato e sviluppare qualcosa di completamente nuovo e unico.
 
Oppure dai un'occhiata agli altri slider su Envato Market: ce ne sono molti tra cui scegliere.  Qual è il tuo slider jQuery preferito e perché?