Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→Glide.js, lo slider Touch-Friendly
  • 30
    OTT
    2013

Glide.js, lo slider Touch-Friendly

Scritto da Claudio Garau | Scripting

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

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.

  • Glide.js
  • jQuery
  • Responsive Design
  • slider
  • Touch-Friendly

Naviga tra i post del Blog

← Utilizzare Gmail come server per la posta in uscita
→ Adobe: violati 38 milioni di account

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Post correlati
  • jQuery Easy Slider: creare gallerie a slide (scorrimento) 22/06/2010
  • Slider con jQuery: i migliori plugin 23/06/2010
  • Coda Slider: gestire elementi a scorrimento con jQuery 21/07/2010
  • sLideR (jQuery slidegallery plugin) 09/08/2010
  • Una copertina per il nostro blog con WP Featured Content Slider 06/03/2012
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Scusi, mi sa dire il timestamp?Scusi, mi sa dire il timestamp?01/04/2010
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript06/10/2015
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP15/06/2010
  • Redirect con jQueryRedirect con jQuery09/07/2010
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie