Tag

, , ,

I progetti SharePoint nei quali mi ritrovo ad usare dei plugin jQuery per creare degli sliders (orizzontali o verticali che siano) sono sempre di più, per cui considerando l’ampia scelta messa a disposizione del web, mi sono detta: perché non scrivere un post che faccia da recap (soprattutto personale) su quelli che preferisco? Magari questa stessa info può ritornare utile anche a qualche collega J.

Bootstrap components: Bootstrap è un framework css progettato per sviluppare rapidamente applicazioni web. Basato su un sistema a griglia a 12 colonne, oltre a supportare un design responsivo, ha il grande vantaggio di avere incorporati una serie di plugin jQuery, fra i quali uno per la gestione dei caroselli.

  • Vantaggi: se si parte da un progetto Bootstrap, sia che si tratti del progetto Responsive SharePoint su Codeplex o di un tema per Twitter Bootstrap (ad esempio Bootswatch o WrapBoostrap), il plugin è già incluso e un adeguato markup è sufficiente ad invocare il plugin
  • Svantaggi: pochi parametri configurabili. E’ pensato esclusivamente per un carosello orizzontale. Nessun supporto nativo per il touch.

jCarousel Lite (http://www.gmarwaha.com/jquery/jcarousellite/index.php): supporta il carosello di immagini e html, sia orizzontale che verticale

  • Vantaggi: è molto leggero (2k), supporta diversi parametri di configurazione (Prev/Next buttons, mousewheel, auto, speed, easing, vertical, circular, scrollable items, callback function)
  • Svantaggi: il carosello verticale non è responsivo ed è necessario apportare degli adattamenti allo script per far sì che scrolli solo quando gli elementi eccedono l’altezza del contenitore; come il precedente plugin il carosello non è touch ready.

NivoSlider (http://docs.dev7studios.com/jquery-plugins/nivo-slider): probabilmente è lo slider orizzontale per eccellenza!

  • Vantaggi: è responsivo, è leggero, supporta numerosi effetti di transizione, ha markup leggero, supporta funzioni di callback
  • Svantaggi: non supporta caroselli verticali.

Flexslider (http://www.woothemes.com/flexslider/): per il carosello orizzontale è il mio plugin preferito J.

  • Vantaggi: è responsivo, supporta qualsiasi tipo di selettore (anche se il markup originale prevede un elenco non ordinato), è in grado di invocare più di un carosello, è supportato da funzioni di callback che consentono di controllare pressoché ogni slide, supporta la navigazione da tastiera e touch (mobile friendly). All’interno del carosello può essere gestito qualsiasi markup html (testo, immagini, link ipertestuali, video, etc). Diversi temi per Bootstrap (consapevoli dei limiti del carosello originale) includono già questo plugin
  • Svantaggi: i pochi parametri del carosello verticale!

CarouFredSel (http://caroufredsel.dev7studios.com/): è un portento e progressivamente sta scalzando dalla mia classifica personale Flexslider (anche se forse il problema non è tanto individuare il carosello migliore in assoluto, quanto piuttosto il carosello più adeguato a soddisfare le esigenze del progetto!). Scritto da dev7studios come NivoSlider, questa è la descrizione del plugin che troviamo sul sito: is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it’s responsive too.

  • Vantaggi: responsivo (sia in orizzontale che in verticale), personalizzabile, supporta il touch (swipe), supporta elementi dall’altezza variabile; sul carosello verticale è in grado di attivarsi automaticamente (scrollare gli elementi) in base al numero di elementi presenti e all’altezza del contenitore.
    Se tutto ciò non bastasse, per i meno avvezzi alla configurazione dei diversi parametri (o per i più pigri), è disponibile un wizard di configurazione (configuration robot) che in termini intellegibili ci consente di generare il markup che fa per noi!

  • Svantaggi: ancora non lo ho scoperti, se non il peso rispetto agli altri plugin (54kb)! L

Mi piacerebbe che questo fosse un post aperto, per cui qualsiasi contributo (altri plugin, osservazioni, etc) è ben accetto!

Happy SharePointing,

B.