Come abilitare lo scorrimento del componente Carousel presente in Bootstrap v4 tramite il touch
Se avete creato una Presentazione in Bootstrap versione 4 ed avete provato a visualizzarla da un dispositivo mobile, avrete sicuramente fatto caso che l'inevitabile abitudine di scorrere avanti e indietro passando il dito (swipe) sullo schermo nella direzione desiderata non produce effetti.
Per questo e per altri casi di utilizzo in cui vogliamo implementare l'utilizzo delle gesture, ci viene incontro uno script chiamato hummer.js
Di seguito lo utilizzeremo per abilitare le gesture di scorrimento avanti e indietro sulla nostra presentazione.
Procediamo come al solito ad aggiungere i nostri riferimenti necessari al funzionamento.
Come prima cosa Aggiungere i riferimenti ad hummer.js
Possiamo procedere in due modi: (A) Scaricando il javascript da depositare sul nostro sito, (B) procedendo utilizzando i riferimenti ai CDNMetodo (A) : Scaricare il file dal sito ufficiale in una cartella js (ad esempio):
hummer.js è scaricabile da qui
Aggiungere nelle nostre pagine il riferimento al javascript scaricato all'interno del tag <head> ad esempio
<script src="js/hammer.min.js"></script>
Metodo (B) aggiungere solo il riferimento CDN all'interno del tag HEAD
Se viene rilevato un evento con direzione destra o sinistra viene eseguito il comando predefinito che bootstrap associa a questo elemento per passare alla slide precedente ("prev") o successiva ("next")
Hommer è troppo interessante per non essere approfondito quindi torneremo sull'argomento.
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha256-eVNjHw5UeU0jUqPPpZHAkU1z4U+QFBBY488WvueTm88=" crossorigin="anonymous"></script>
Aggiungere lo script che ci permetterà di attivare la funzione..
Prima che si chiuda il tag BODY aggiungere il seguente script:<script> $('.carousel').each(function () { var $carousel = $(this); var hammertime = new Hammer(this, { recognizers: [ [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }] ] }); hammertime.on('swipeleft', function () { $carousel.carousel('next'); }); hammertime.on('swiperight', function () { $carousel.carousel('prev'); }); }); </script>
Descrizione
In pratica su tutti gli elementi con la classe "carousel" presenti nel nostro documento verrà controllato se viene fatto un swipe (ovvero uno scorrimento del dito) in senso orizzontale sul nostro elemento.Se viene rilevato un evento con direzione destra o sinistra viene eseguito il comando predefinito che bootstrap associa a questo elemento per passare alla slide precedente ("prev") o successiva ("next")
Hommer è troppo interessante per non essere approfondito quindi torneremo sull'argomento.
Nessun commento:
Write commenti