JS:
$('.slider1').mbSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
HTML:
<div class="slider1">
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=7893893749"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=5584098948"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=4035797764"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=9734385435"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=2033205696"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=9833584948"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=2387732802"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=3467453513"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=7907614266"></div>
</div>
Al fine di impostare un carosello responsive, dobbiamo impostare tre valori:
slideWidthmaxSlidesminSlides
Prova a ridimensionare la finestra del browser. Quando c'è spazio a sufficienza vengono visualizzate 3 slide (maxSlides), altrimenti vengono visualizzate 2 slide (minSlides).
slideWidth
Quando si vuole che lo slider mostri più di una diapositiva per volta, dobbiamo impostare la larghezza massima che ogni slide può utilizzare. Se non viene impostato nessun slideWidth, logni dispositiva occuperà tutta la larghezza del contenitore. Di conseguenza: utilizzare questa opzione per impostare la larghezza massima di ogni diapositiva. Quando lo spazio lo consente, le diapositive avranno questa larghezza e non potranno mai superarla indipendentemente dallo spazio disponibile..
L'impostazione di slideWidth ha effetto anche sulla larghezza complessiva dello slider è che non sarà mai superiore alla massima larghezza consentita per una diapositiva moltiplicata per il numero massimao di diapositive visibili (maxSlides). Quindi, se abbiamo uno slider con le seguenti impostazioni: slideWidth: 100, minSlides: 2, maxSlides: 3, lo slider potrà avere una larghezza massima di 300px. Se, invece, la sua configurazione fosse: slideWidth: 200, minSlides: 1, maxSlides: 5, potrebbe avere una larghezza massima di 1000px..
In altre parole lo slider avrà sempre una larghezza massima di: slideWidth * maxSlides.
minSlides/maxSlides
Per rendere il nostro slider responsive e fare in modo che sia visualizzato correttamente su tutti i dispositivi, possimo impostarlo in modo che mostri un numero diverso di diapositive a seconda della dimensione dello schermo. Abbiamo a disposizione due opzioni di configurazione:
minSlides: stabilisce il numero minimo di diapositive visualizzate, indipendentemente dall larghezza dello schermo. Anche su schermi molto piccoli, lo slider verrà ridimensionato in modo da essere contenuto nello schermo mostrando questo numero di diapositive.maxSlides: stabilisce il numero massimo di diapositive visualizzate, indipendentemente dall larghezza dello schermo. Questo valore combinato con il valore di slideWidth (che rappresenta la larghezza massima che può assumere una diapositiva) determina la larghezza massima dello slider. Quindi, in conclusione, la larghezza del nostro slider responsive sarà maxSlides * slideWidth se lo spazio sul dispositivo lo consente o, altrimenti, il 100% dello spazio a disposizione.
In questa maniera su un monitor da 1920px, il carousel potrebbe visualizzare 10 diapositive alla volta, mentre su un telefono cellulare largo 300 pixel ne potremme mostrare una o due. Si ricorda infine che, diminuendo le dimensioni dello spazio a disposizione per lo slider, una volta che viene visualizzato il numero minimo di diapositive (minSlides), le diapositive verranno scalate perchè lo slider sia contenuto nello schermo..
slideMargin(opzionale)
Determina se un margine di slideMargin pixel separa le diapositive tra loro.