Glide.js, lo slider Touch-Friendly

Glide.js è una piccola applicazione scritta in JavaScript che permette di creare uno slider Touch-Friendly (cioè pensato anche per l’interazione tramite il tocco sui dispositivi mobili) e ispirato ai dettami del Responsive Design; leggerissima (pesa appena 4,5 Kb in versione minificata), si tratta di una soluzione basata sul framework jQuery utilizzabile liberamente (licenza MIT) e gratuitamente.

Glide.js è basato su markup OOCSS (Object Oriented CSS) e sulla metodologia BEM (Block-Element-Modifier) che prevede una collaborazione stretta e continua tra designer e sviluppatori; questo lavoro si è tradotto in un notevole il supporto per le transizioni CSS3 che risultano essere particolarmente performanti anche all’interno di un ecosistema mobile. Da notare la disponibilità di una Public API per i callbacks che permetterà l’integrazione veloce con applicazioni di terze parti.

Lo script supporta inoltre gli eventi ricollegati allo swipe e quindi al trascinamento degli elementi presenti nella viewport, la navigazione tramite frecce e pulsanti, l’utilizzo attraverso la tastiera, l’autoplay per la riproduzione automatica dei contenuti in slide, la messa in pausa tramite on hover e, caratteristica abbastanza interessante per un nuovo progetto, la retrocompatibilità con le versioni più datate dei browser.

La procedura richiesta per l’installazione risulta essere particolarmente semplice: dopo aver incluso tutti i file necessari e il foglio di stile CSS come nell’esempio seguente

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.glide.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">

Si potrà definire una divbox contenente un elenco puntato degli elementi in slide:

<div class="slider">
    <ul class="slides">
        <li class="slide"></li>
        <li class="slide"></li>
        ...
    </ul>
</div>

Fatto questo si potrà lanciare lo script con le impostazioni di default:

<script>
    $('.slider').glide();
</script>

Nel caso in cui si preferisca invece personalizzare l’output di Glide.js è possibile parametrare le semplici opzioni fornite dalla documentazione a corredo.