Parametri perfetti. Slider jQuery reattivi per la pagina di destinazione. Esempi di utilizzo di diverse configurazioni dello slider Slick

Ciao amici. Oggi ne parleremo jQuery reattivo cursori per decorare il tuo file pagina di destinazione, strutturare correttamente le informazioni e presentarle in modo succinto.

Una volta ho condotto un sondaggio in social networks e mi ha chiesto di suggerire qualche utile script di scorrimento che usi tu stesso. Il post non ha avuto molto successo, ma mi è stato consigliato ottimo strumento, che oggi sarà al primo posto. Grazie mille per questo. Forse dopo questo articolo qualcuno consiglierà uno script ancora migliore.

Script TOP che implementano lo slider sul sito

Poiché tutti gli script presentati di seguito sono plug-in jQuery, possono essere facilmente incorporati sia su normali siti html, sia su qualsiasi CMS e molti altri.

Giostra gufo 2

Owl Carousel 2 è secondo me il miglior slider jQuery gratuito. Molte impostazioni, disponibilità API e personalizzazione completa. Tutto questo mi ha fatto innamorare a prima vista. Reagisce alla grande su smartphone e tablet, supporta lo scorrimento e molto altro ancora.

Slider scorrevole

Al secondo posto, ora, metterei lo slider Slick. Un'opzione piuttosto interessante che utilizzo da un po 'di tempo. Per le attività sulla pagina di destinazione, stavo bene. Commenti alla cassa, loghi di marchi e partner, questo dispositivo di scorrimento ha affrontato tutto questo con il botto. È possibile utilizzare metodi ed eventi, nonché visualizzare lo slider in diversi punti della pagina.

Dispositivo di scorrimento Sudo

Tra le altre cose, lo slider supporta lo scorrimento trascinando e rilasciando elementi sul display touch, che senza dubbio delizierà i visitatori del tuo sito web che utilizzano uno smartphone o un tablet.

Quindi, il cursore ha un nome slick.js.... Per connettere lo slider al sito, incolla il codice in testa il tuo sito le seguenti righe:

È tutto! Lo slider è pronto per partire. Ora non ti resta che collegarlo agli elementi necessari. Scriviamo html:

e collega il cursore ad esso (questo codice è meglio posizionato nella sezione head):

Dopo tali semplici manipolazioni, il tuo cursore scorrevole inizierà a lavorare con le impostazioni predefinite.

Anziché CONTENUTO 1, CONTENUTO 2 e altri, puoi inserire qualsiasi contenuto: immagini, titoli, paragrafi e così via. Ad esempio, per un negozio online, puoi creare un rotatore di prodotti:

Puoi aggiungere un numero illimitato di elementi al rotatore.

Il dispositivo di scorrimento supporta anche molte impostazioni: il numero di elementi visualizzati, il numero di elementi di scorrimento, il dispositivo di scorrimento verticale o orizzontale, la velocità di scorrimento e altro ancora.

È inoltre possibile regolare il numero di elementi visualizzati per diverse risoluzioni di visualizzazione:

$ (document) .ready (function () ($ (". product-slider"). slick ((responsive: [(breakpoint: 1024, // for display up to 1024px or more) settings: (slidesToShow: 3, // amount elementi visualizzati 3 diapositiveToScroll: 3, // il numero di elementi di scorrimento alla volta 3 punti: true // mostra punti (per il numero di elementi))), (breakpoint: 600, // per impostazioni di visualizzazione inferiori a 600px: (slidesToShow: 2, // numero di elementi visualizzati 2 diapositiveToScroll: 2 // numero di elementi scorrevoli alla volta 2)), (breakpoint: 480, // per impostazioni di visualizzazione inferiori a 480px: (slidesToShow: 1, // numero di elementi scorrevoli alla volta 1 diapositiveToScroll: 1 // importo elementi scorrevoli alla volta 1))]));));

Impostazioni più dettagliate sono disponibili all'indirizzo

liscio - una soluzione completa per creare la funzionalità della giostra, nelle sue varie forme. È possibile visualizzare / scaricare versioni demo e standard e sorgenti.

Tagliato inutile

Nella configurazione di base, slick ha diversi script, diversi stili, proprio carattere... Sto usando la versione ridotta:

• slick.min.js (minimizzato)
• slick.css (+ puoi pulire gli stili)
• slick-theme.css (+ puoi pulire gli stili)

Gli stili, se lo si desidera, possono essere combinati in uno solo.
Sostituisco i collegamenti al carattere slick con il FontAwesome più conveniente

Giostra di base

La funzionalità principale del carousel è l'impostazione di div class \u003d "multiple-items". div class \u003d "carousel" è necessario solo per impostare i margini del carosello.

Script di inizializzazione dello script

$ (document) .ready (function () ($ (". multiple-items"). slick ((// infinite: true, // scrolling in a circle autoplay: true, slidesToShow: 3, slidesToScroll: 3));) );

Slick-slider (larghezza: 100%; float: left;) .slick-slide (cursore: pointer;) .multiple-items .slick-slide (margin: 0 15px;) .carousel (padding: 0 3%; float: left; width: 100%; box-sizing: border-box;) / * for woocommerce products * / .carousel .woocommerce ul.products li.product (margin: 1em 0 1.992em 0; width: 100%;)

Carosello per prodotti woocommerce

Versione modificata

Leggermente semplificata la visualizzazione dei prodotti per il carosello (! Non è una soluzione universale, può essere visualizzata in modo diverso in diverse opzioni di layout):

Quando si caricano gli script del carosello, si verificano inclinazioni del layout. Creiamo alcuni stili iniziali che manterranno il carosello all'interno del layout corrente:

Elementi multipli (display: flex! Important; flex-wrap: wrap; margin-bottom: 25px;). Multiple-items img (-moz-backface-visible: visible; -webkit-backface-visible: visible; backface-visible : visible;) .slick-list (margin: 0 -1px 0 0! important; padding: 0 1px 0 0! important; width: 100%;) .slick-track (border: solid # e9eaec; border-width: 0 0 0 1px; display: flex! Importante; padding-bottom: .1rem;) .carousel .product (border: solid # e9eaec; border-width: 1px 1px 1px 0; background: #fff; padding: 15px; list-style : nessuno; text-align: center; position: relative; margin-bottom: -.1rem; height: auto;) .multiple-items\u003e .product (width: 25%;)

Le proprietà della faccia posteriore per le immagini sono specificate, tk. se lasci nascosto, quando riavvolgi, nascondono le etichette.

Reattività del carosello

Lo script può essere personalizzato per diverse risoluzioni dello schermo. Per fare ciò, prescrivi parametri reattivi nelle impostazioni.

Reattivo: [(breakpoint: 1280, impostazioni: (slidesToShow: 4, slidesToScroll: 4,)), (breakpoint: 1024, impostazioni: (slidesToShow: 3, slidesToScroll: 3,)), (breakpoint: 800, impostazioni: (slidesToShow : 2, slidesToScroll: 2)), (breakpoint: 480, impostazioni: (slidesToShow: 1, slidesToScroll: 1))]

Oppure disabilita completamente a una certa risoluzione - impostazioni: "unslick"

Slider scorrevole

Recentemente, creo anche il cursore principale basato su slick. C'è un piccolo problema: quando la pagina viene caricata, tutte le diapositive vengono visualizzate per una frazione di secondo, quindi vengono aggiunte. L'ho camuffato in questo modo:

Rendi invisibile tutto tranne una diapositiva:

Slick-track\u003e div: nth-child (2) img (display: block! Important;) # index-slider img (display: none;)

E quando la pagina viene caricata, attiva il resto:

JQuery (document) .ready (function () (jQuery ("# \u200b\u200bindex-slider img"). Css ("display", "block");));

Caricamento diapositive

Slick ne ha un altro funzione utile lazyload (). Hai solo bisogno di aggiungere una proprietà allo script lazyLoad: "ondemand"... E cambia l'output dell'immagine:

oppure puoi semplificarlo in questo modo:

ID), "full"); ?\u003e

E affinché le diapositive si caricino al contrario, inizialmente è necessario registrare il file lazyLoad: "progressivo"

Il caricamento standard delle immagini non funziona abbastanza correttamente, consiglio di usarlo insieme a lazyload.

Versione mobile dello slider
Può essere aumentato in mob. versione dell'altezza del cursore, mentre i bordi delle immagini verranno tagliati, ma l'immagine sarà più grande:

@media screen e (max-device-width: 480px) (# index-slider, .hotel-photos (height: 200px;) .slick-list, .slick-track (height: 100%;) # index-slider img , .hotel-photos img (height: 100%; object-fit: cover;))

adattamento all'oggetto: copertura; - bella proprietà CSS 3, supportata dalla maggior parte dei browser

Slick Gallery

Recentemente su uno dei siti ho notato un uso interessante di Slick come galleria. La particolarità è che le immagini della galleria raggiungono i bordi dello schermo (dal sito allo schermo intero).

Per l'implementazione, è necessario posizionare il dispositivo di scorrimento (# index-slider) in un contenitore (.s2) e scrivere i seguenti stili:

S2 (overflow: nascosto; display: block;) # index-slider (max-width: 1000px; margin: 0 auto;) .s2 .slick-list (overflow: visible;) # index-slider .slick-slide img ( larghezza massima: 800 px; margine: 0 auto;)

o anche più semplice:

Per creare una galleria del genere, è sufficiente registrare 2 stili:

# index-slider (max-width: 1280px; margin: 0 auto;) # index-slider .slick-list (overflow: visible;)

Abbiamo scaricato lo script dello slider nell'ultima lezione con il comando

$ bower i slick.js

Inoltre può essere trovato su google - primo collegamento come richiesto da slick http://kenwheeler.github.io/slick/

Vantaggi del cursore:

- supporta eventi touch - può essere visualizzato dal telefono scorrendo con il dito
- supporta responsive - puoi impostare un numero diverso di diapositive a seconda delle dimensioni dello schermo: su schermi grandi, visualizza 4 diapositive, su schermi medi, 2-3, su telefoni, una

È buona norma includere gli script dalla cartella bower_components



Quindi, quando lo script viene aggiornato, bower non deve riscrivere il numero di versione nel codice, poiché bower assegna agli script nomi costanti che non cambiano durante l'aggiornamento.

Per quanto riguarda gli stili che si trovano nella cartella slick: slick.css, slick.less, slick.theme.less, è meglio copiarli nella cartella css e connettersi da lì. Se li lasci in posizione e apporti modifiche agli stili del cursore, quando lo script viene aggiornato, tutte queste modifiche andranno perse.

A differenza di altri dispositivi di scorrimento, i frame non vengono inseriti nell'elenco, ma in blocchi:

Chiamata senza parametri

Quando si chiama il plug-in senza parametri, otteniamo una versione semplice con una diapositiva sulla pagina e frecce di navigazione.

$ (".single-item"). slick ();

Mostra più diapositive

Nell'esempio, abbiamo impostato i parametri "slick slider" di scorrimento in loop, attivato la visualizzazione dei punti di navigazione, specificato il numero di diapositive visualizzate e di scorrimento.
$ (".multiple-items"). slick ((
infinito: vero,
// cursore in loop - dopo l'ultima diapositiva arriva la prima punti: vero,
// punti sotto il cursore che mostrano la diapositiva attiva
diapositiveToShow: 3,
// il numero di diapositive che vengono visualizzate sullo schermo slidesToScroll: 1
// il numero di diapositive che vengono capovolte contemporaneamente
});

Modalità di centraggio

In modalità centratura, la diapositiva attiva è centrata.
$ (".centro"). slick ((
centerMode: true,
diapositiveToShow: 3,
});
La diapositiva centrale ha la classe "slick-center", il che significa che puoi modellarla separatamente.

Adattabilità

Nello slider, puoi regolare la visualizzazione reattiva di un certo numero di diapositive, a seconda del valore della larghezza dello schermo. Ad esempio, è necessario visualizzare solo 2 diapositive quando lo schermo è largo meno di 600 pixel e cambiarle una alla volta. La soluzione a questo problema sarà simile a questa

$(".uncycle"). slick ((infinite: false, speed: 350, // determina la velocità di svolta diapositiveToShow: 4, // numero di diapositive da mostrare slidesToScroll: 2, // quante diapositive girare alla volta reattivo: [(breakpoint: 600, // dice a quale larghezza dello schermo abilitare le impostazioni impostazioni: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))]));

Commutazione fluida

Nello stato standard, il dispositivo di scorrimento esegue la sostituzione improvvisa delle diapositive. Ma la funzionalità Slick fornisce una modalità di sostituzione delle diapositive fluida. Per fare ciò, è necessario ricorrere all'attributo data-lazy, che specifica il percorso dell'immagine. L'attributo deve essere assegnato non al wrapper, ma al tag immagine. Ciò eviterà di utilizzare il codice js. Un'alternativa sarebbe questo comando

LazyLoad: "ondemand"

L'attributo dovrebbe essere scritto in questo modo

< img data- lazy = " images/slaid.jpg" >

Cambiata fluida senza muoversi

La particolarità di un tale dispositivo di scorrimento è che sullo schermo è presente una sola diapositiva che, quando viene commutata, passa gradualmente alla successiva. L'effetto si basa sul principio di aumentare gradualmente la trasparenza. Cioè, viene selezionato un certo periodo di tempo, durante il quale la trasparenza della prima diapositiva cambia da 0% a 100%, a causa del quale la diapositiva successiva diventa visibile. Lo script di un tale dispositivo di scorrimento sarà simile a questo

$(".fade"). slick ((infinite: true, velocità: 400, fade: true, cssEase: "linear"));

Slick è lo slider più versatile e facile da usare oggi disponibile. Una vasta gamma di impostazioni dello slider copre una grande varietà di soluzioni per l'implementazione degli slider, che è probabilmente il vantaggio più significativo di questo slider.

Impostazione del cursore scorrevole

• accessibilità - il valore iniziale di questo parametro è impostato su true, è responsabile del collegamento dei pulsanti di navigazione per lo slider - si tratta di frecce avanti e indietro, nonché pulsanti sotto forma di punti.
• adaptiveHeight - si applica solo a un singolo cursore, che cambierà l'altezza del contenitore genitore a seconda dell'altezza del cursore. Nelle condizioni iniziali, l'impostazione non è collegata.
• riproduzione automatica - configura la rotazione delle diapositive in modalità automatica, senza l'intervento dell'utente. Il valore predefinito per questa impostazione è false.
• autoplaySpeed - questo parametro è ausiliario per la riproduzione automatica e imposta il periodo di tempo dopo il quale verrà eseguita la presentazione automatica. Inizialmente è impostato su 3000 millisecondi.
• frecce - collega le frecce avanti e indietro al cursore. Il foglio di stile esterno consente di modificare la posizione e l'aspetto di queste frecce.
• asNavFor - stabilisce un collegamento di navigazione tra due slider tramite un identificatore o una classe. Nelle condizioni iniziali, il parametro corrisponde a zero.
• prevArrow - consente di modificare l'aspetto della freccia di navigazione standard che scorre la diapositiva precedente.
• nextArrow - è simile alle funzioni del parametro precedente, ma è responsabile della freccia che fa avanzare la diapositiva.
• centerMode - fissa la diapositiva corrente al centro del contenitore padre, inizialmente l'opzione è disabilitata.
• centerPadding - quando la modalità di visualizzazione centrale della diapositiva corrente è attiva (il parametro precedente), imposta un margine interno per questa diapositiva, che consente visivamente di ingrandire la diapositiva corrente.
• cssEase - è responsabile dell'animazione del cambio di immagini, può renderla liscia o più nitida. Accetta il valore predefinito "facilità".
• customPaging - consente di inserire il proprio modello per visualizzare lo slider.
• punti - collega i punti di commutazione, per impostazione predefinita è disattivato.
• trascinabile - abilita la possibilità di girare le diapositive premendo il mouse. Cioè, se passi il cursore del mouse sul cursore, tienilo premuto e lo sposti di lato, la diapositiva passerà a quella successiva.
• dissolvenza - crea l'effetto di dissolvenza diapositiva durante la commutazione, effetto di animazione.
• focusOnSelect - mette a fuoco l'elemento di scorrimento specificato.
• allentamento - consente di impostare una modalità di animazione speciale quando si cambiano le immagini.
• edgeFriction - disabilita la commutazione delle diapositive sull'ultimo elemento. Viene eseguito solo se il dispositivo di scorrimento non è in loop.
• infinito - ripete la presentazione. Ciò significa che quando si cambia l'ultima immagine, la presentazione ricomincerà.
• initialSlide - definisce l'immagine da cui inizia la presentazione. Per impostazione predefinita, il dispositivo di scorrimento iniziale seleziona la prima immagine in ordine.
• lazyLoad - consente di impostare la modalità di caricamento delle diapositive successive. Sono disponibili solo 2 impostazioni: "ondemand" e "progressivo", quest'ultima è l'impostazione predefinita.
• pauseOnHover - interrompe lo scorrimento delle diapositive quando passi il cursore del mouse sul corpo del cursore. Funziona solo se è definita la commutazione automatica delle diapositive.
• pauseOnDotsHover - interrompe lo scorrimento delle diapositive quando si passa con il mouse sugli interruttori a punti. Funziona solo se è definita la commutazione automatica delle diapositive.
• rispondere a - provoca una reazione ai cambiamenti nella larghezza della finestra del browser. Sono disponibili tre valori per l'uso: "window", "slider" o "min".
• reattivo - consente di adattare le impostazioni del dispositivo di scorrimento alla larghezza dello schermo. Differisce dall'impostazione precedente in quanto il limite di larghezza è determinato dal valore esatto in pixel. Utilizzato per layout reattivo per dispositivi mobili.
• slidesToShow - consente di impostare il numero di immagini visualizzate nell'area visibile. Inizialmente, viene mostrata 1 diapositiva, ma questo valore può essere variato.
• slidesToScroll - dice al cursore quante immagini devono essere cambiate quando si cambia.
• velocità - fissa la velocità con cui le diapositive verranno cambiate.
• variabileWidth - adatta la larghezza dei contenitori di scorrimento alla larghezza di ciascuna immagine visualizzata.

UPD:Ho provato a creare uno slider basato su questa lezione e si è scoperto che è molto incompleto.
Complementare.

1. Scarica il repository qui https://github.com/kenwheeler/slick
2. Nel file index.html prima dell'apertura aggiungi stili di scorrimento:

Prima della chiusura collegare gli script

Questo dispositivo di scorrimento richiede anche i caratteri. La cartella dei font dalla cartella slider deve essere collocata nella cartella css del progetto.
E anche nella cartella slider è necessario trovare l'immagine ajax-loader.gif e scrivere il percorso ad essa nel file slick-theme.css

3. Ora assegniamo una classe al div-wrapper dello slider, ad esempio, multiple-items
E nel file script.js scriviamo il codice

$ (documento) .ready (function () (
$ (". multiple-items"). slick ((
riproduzione automatica: falso,
autoplayVelocità: 6000,
frecce: vero,
infinito: vero,
punti: vero,
centerMode: true,
diapositiveToShow: 3,
slidesToScroll: 1
});
});

4. Il dispositivo di scorrimento funziona già. Ma le frecce non sono visibili, perché si trovano al di fuori dei bordi del cursore e la larghezza del cursore è a schermo intero. Cerca le frecce nel file slick-theme.css e modifica il rientro in modo che le frecce rimangano all'interno del cursore e non all'esterno.

5. Bene. Ora, secondo la mia idea, la slitta centrale del cursore dovrebbe essere diversa da quelle laterali.
scrivi che è sufficiente scrivere nel codice

$ (". middle"). slick ((
centerMode: true,
// centra la diapositiva corrente
centerPadding: "50px",
// ingrandisce leggermente la diapositiva corrente
slidesToShow: 3
// mostra 3 diapositive per la visualizzazione
});

Per aumentare la dimensione del cursore centrale. In effetti, questo metodo non funziona.
Ingrandita la diapositiva centrale con stile
.slick-center (
colore di sfondo: # 8cc63f;
trasformare: scala (1.3);
}

Visualizza più slider e carosello di immagini slick utilizzando lo shortcode con la categoria. Completamente reattivo, scorrimento abilitato, trascinamento del mouse desktop e loop infinito. Completamente accessibile con navigazione con i tasti freccia Riproduzione automatica, punti, frecce ecc.

Utilizza un tipo di articolo personalizzato e una tassonomia per creare uno slider, con opzioni quasi illimitate e supporto per più cursori su qualsiasi pagina. Puoi anche visualizzare il cursore dell'immagine sull'intestazione del tuo sito web.

Abbiamo aggiunto 5 design per il cursore e 1 design per il carosello. Puoi trovare tutti i design sul nostro sito web dimostrativo. Basta copiare lo shortcode del design che ti piace e utilizzare.

Registro delle modifiche

1.8 (08 agosto 2019)

• [*] Aggiorna link demo
• [*] Risolti alcuni piccoli-piccoli problemi.
• [*] Testo aggiornato sotto l'immagine mostrata, ad esempio Aggiungi immagine cursore.

1.7.1 (31 maggio 2019)

• [+] Aggiunto nuovo parametro shortcode, ad esempio image_fit \u003d "true". Il parametro image_fit viene utilizzato per specificare come ridimensionare un'immagine per adattarla al suo contenitore. Per impostazione predefinita, il valore è "true". Le opzioni sono "vero O falso". NOTA: NOTA: image_fit \u003d "true" funziona meglio se viene data sliderheight. se image_fit \u003d "false", non è necessario utilizzare il parametro sliderheight.
• [*] Il parametro image_fit funziona sia con lo shortcode.
• [+] Aggiunto nuovo parametro shortcode, ad esempio image_size \u003d "full" per shortcode (l'impostazione predefinita è "full", i valori sono thumbnail, medium, medium_large, large, full)
• [-] Altezza predefinita 400 rimossa dal parametro sliderheight.
• [-] Rimuovi la proprietà CSS di adattamento agli oggetti da img sotto CSS se image_fit \u003d "false".

1.6.2 (12 febbraio 2019)

• [*] Modifica minore nel flusso di partecipazione.

1.6.1 (26, dic 2018)

• [*] Aggiorna il flusso di partecipazione.

1.6 (06, dic 2018)

• [*] Testato con WordPress 5.0 e Gutenberg.
• [*] Risolti i problemi di altezza del cursore con alcuni design.
• [*] Preso una maggiore sicurezza con esc_url e esc_html.
• [*] Risolti alcuni problemi CSS.

1.5.1 (05 giugno 2018)

• [*] Segui alcune linee guida dettagliate sui plugin di WordPress.

1.5 (10/3/2018)

• [*] Risolti alcuni problemi CSS relativi alla freccia dello slider.

1.4 (10/3/2018)

• [*] Risolti alcuni problemi CSS

1.3.4 (04/10/2017)

1.3.3 (04/10/2017)

• [*] Aggiornato slick.min.js all'ultima versione
• [*] Risolti tutti i problemi di risposta e controllato molti dispositivi mobili.
• [*] Se utilizzi un plug-in della cache, svuota la cache dopo gli aggiornamenti del plug-in

1.3.2.1 (27/09/2017)

• [*] Risolto il problema di design-6 con il parametro shortcode variablewidth \u003d "true" nel layout reattivo
• [*] Se utilizzi un plug-in della cache, svuota la cache dopo gli aggiornamenti del plug-in

1.3.2 (23/09/2017)

• [*] Risolto il problema di design-6 con il parametro shortcode variablewidth \u003d "true"
• [*] Se utilizzi un plug-in della cache, svuota la cache dopo gli aggiornamenti del plug-in

1.3.1.1 (23/09/2017)

• [*] Risolto il problema di risposta segnalato dagli utenti nella v-1.3.1
• [*] Se utilizzi un plug-in della cache, svuota la cache dopo gli aggiornamenti del plug-in

1.3.1 (22/09/2017)

• [*] Risolvi il problema principale di JS wp_register_script

1.3 (22/09/2017)

• [+] Aggiunto sliderheight parametro in shortcode
• [*] RTL ha migliorato il funzionamento con i siti Web RTL
• [*] La modalità centrale e la larghezza variabile sono migliorate in base al feedback degli utenti
• [*] sliderheight parametro migliorato

1.2.8 (22/05/2017)

• [+] RTL supportato

1.2.7 (25/04/2017)

• [+] Aggiunto overlay per design-2

1.2.6 (07/11/2016)

• [+] Aggiunta la scheda "Come funziona"
• [-] Scheda design Pro rimossa

1.2.5 (20/10/2016)

• Aggiornati tutti i design e risolto il bug
• Risolto il problema di visualizzazione delle immagini sui dispositivi mobili
• Immagini delle frecce sostituite

1.2.4

• Slider js aggiornato all'ultima versione.
• Aggiornata la pagina di progettazione del plugin.

1.2.3

• Risolti alcuni problemi CSS.

1.2.2

• Risolti alcuni problemi CSS.
• Risolto più problemi di conflitto jquery slider.

1.2.1

• Risolti alcuni bug
• Aggiunta la versione Pro con 16 design