Glider.js: sliding mobile-friendly con JavaScript

Glider.js è un plug-in JavaScript con cui produrre ottimi effetti di scrolling orizzontale che ricordano le animazioni "carousel". A differenza di queste ultime però, gli effetti prodotti con Glider.js saranno completamente mobile-friendly, interamente responsive e prive del loop infinito che consente di passare dall'ultima slide alla prima, per un risultato ultra-leggero e pulito dedicato in particolar modo ai device mobile. Ispirato al conosciuto Slick.js, Glider.js presenta le seguenti caratteristiche:

• footprint leggerissimo: peso 2.1kb nella versione gzippata;
• inizializzazione in meno di 25ms ed esecuzione;
• privo di qualsiasi tipo di dipendenza, scritto in puro Vanilla Javascript;
• utilizza lo scrolling nativo del browser (momentum scrollung);
• completamente responsive: utilizza i breakpoints;
• navigazione interamente customizzabile;
• possibilità di produrre frecce o punti per lo scrolling;
• supporta il trascinamento del mouse per il passaggio tra le slide;
• supporto per Flexbox di default;
• supporto per gli eventi custom;
• supporto per le estensioni.

Gli esempi che mostrano Gliders.js in azione sono davvero molti e di sicuro impatto, dal semplice codice per una slide di base che permette di iterare su 10 elementi:

new Glider(document.querySelector('.glider'), {
  slidesToShow: 1,
  dots: '#dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  }
});

fino a quella che include un'impostazione per la responsiveness (via brakpoints) ed il supporto completo a Scroll Lock:

new Glider(document.querySelector('.glider'), {
  // Mobile-first defaults
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: '#dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  },
  responsive: [{
    // screens greater than > 775px
    breakpoint: 775,
    settings: {
      // Set to `auto` and provide item width to adjust to viewport
      slidesToShow: 'auto',
      slidesToScroll: 'auto',
      itemWidth: 150,
      duration: 0.25
    }
  }]
});

L'API di Glider.js è ricca di feature personalizzabili attraverso semplici controlli Javascript. Per una panoramica relativa a tutte le impostazioni settabili ed ai metodi utilizzabili la sezione Settings è a disposizione dello sviluppatore.

Via Glider.js