fleXlider - jQuery plugin
Fully responsive CSS3 slider
Versione corrente: 3.1.0
Al contrario di molti altri slider prodotti da ciarlatani del web design (super pesanti, strapieni di script, e nient'affatto adattivi alle varie dimensioni degli schermi) qui si presenta IL vero slider responsive e touch-friendly: veloce, pratico, intuitivo. Per i browser non CSS3-compliant è previsto un fallback di animazione controllata da javascript.
È uno slider continuo (ciclo infinito) molto semplice, senza effetti esagerati, leggerissimo, e facilmente configurabile alle proprie esigenze. La personalizzazione è estremamente intuitiva. L'effetto adattivo è completamente creato grazie al CSS3, senza pesanti librerie di javascript.
Sono inoltre implementate le API di YouTube e di Vimeo per ottenere la migliore esperienza web possibile sfruttando appieno tutte le ultime tecnologie HTML5: quando viene guardato un video viene attivato il "cinema theater mode" e tutti i comandi nell'iframe sono abilitati (lo slider va in pausa se l'autoplay era attivo).
Pubblicato con licenza GPLv3
Esempio: slider con autoplay
Immagini e video appartengono ai relativi proprietari e sono stati reperiti liberamente da internet
Dandelions
A nothing at a time -
And Dandelion's Drama
Expires in a stem.
Il Panda
di passaggio per Milano
incontrò, con gran stupore,
una panda... col motore!
Acinonyx jubatus
I ghepardi hanno alcuni tratti che li rendono simili ai canidi: basti pensare alle lunghe zampe, con estremità strette e cilindriche ed unghie solo parzialmente retrattili, piuttosto che brevi e compatte e munite di artigli retrattili ed affilati come nella maggior parte degli altri felidi.
Jacaranda
Jacaranda is a genus of 49 species of flowering plants in the family Bignoniaceae, native to tropical and subtropical regions of Central America, South America, Cuba, Hispaniola, Jamaica and the Bahamas. The image doesn't represent a jacaranda.Esempio: slider con video da YouTube
Immagini e video appartengono ai relativi proprietari e sono stati reperiti liberamente da internet
Macaca Fuscata
anche dette Scimmie delle nevi. Jigokudani è l'unico posto conosciuto al mondo in cui le scimmie fanno il bagno in sorgenti calde naturali.Known issues
- Lo slider accetta minimo 3 (TRE) slides. Se si hanno a disposizione solo 1 o 2 slides, non viene istanziato.
- Le animazioni sono in puro CSS3 al fine di attivare l'accelerazione hardware*. Browser datati (alias Internet Explorer fino al 9) vengono supportati con animazioni controllate da javascript.
- Le API fanno uso del postMessage e DOMWindow per colloquiare col player. Browser datati potrebbero non aver implementato questa funzionalità HTML5.
- Le API di Youtube vanno in conflitto con quelle di Vimeo. Non è consigliabile incorporare video di diversi host supportati.
- Altri iframe contenenti video non sono ufficialmente supportati, ossia non vengono riconosciuti come video (quindi non viene attivata la modalità cinema). Ciò è dovuto alla cross-domain policy. Se l'opzione allowSwipeIframe = true allora non sarà nemmeno possibile cliccare il video**, a meno che la slide abbia la classe "video". In quest'ultimo caso è cliccabile solo la parte centrale (dove solitamente c'è il bottone play) e la parte in basso (dove solitamente c'è l'avanzamento del filmato). Se invece allowSwipeIframe = false il contenuto sarà totalmente fruibile, ma non sarà abilitato il tocco per quella slide, perciò per cambiare slide funzioneranno solo le frecce e/o il navigatore: attenzione con tablet e smartphone!.
* Vengono utilizzate le proprietà CSS3 transformX e transition
** I contenuti flash, a meno che non sia settata l'opzione wmode = opaque, si presenteranno sopra ogni elemento html (anche sopra ai menu). E' il comportamento standard di qualsiasi browser e non dipende da questo plugin. Con l'avvento dell'HTML5 il problema non sussiste più, ma nel mondo web le applicazioni in flash sono ancora ampiamente diffuse.
To Do
- Aumentare le video API supportate.
- Creare versione per Wordpress.
Istruzioni
HTML
Nella sezione head del documento aggiungiamo i link agli stili e script base:
<head>
...
<script src="JS/fleXlider-vX.X.X.min.js"></script>
...
<link rel="stylesheet" type="text/css" href="CSS/fleXlider-vX.X.X.min.css">
...
</head>
Nel body del documento la struttura dev'essere questa:
<body>
...
<div class="fleXlider" id="myFX">
<div class="fx-cont">
<div class="fx-slider">
<div class="fx-s current"><!-- it's good practice to assign current class to first slide, or slider will flash from empty to filled -->
<!-- background image must be placed on top of all (it's optional) -->
<img class="fx-image" src="example.jpg">
<div class="fx-egg">
<!-- custom content must be placed here (it's optional) -->
</div>
<div class="caption"><div>
<h2><!-- caption title must be placed here (it's optional) --></h2>
<!-- caption content must be placed here (it's optional) -->
</div></div>
</div>
<div class="fx-s">
<div class="fx-egg">
<!-- embedded video from youtube: just copypaste embedding code and don't bother! -->
<iframe width="XXX" height="XXX" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="fx-s video"><!-- class "video": allow play button click for an unsupported video -->
<div class="fx-egg">
<iframe width="XXX" height="XXX" src="https://unknown/video/hoster/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
...
</body>
Script
È caldamente consigliato utilizzare i selettori di jQuery. Nella funzione $.fn.fleXlider si può passare un'oggetto avente i seguenti parametri (in questo esempio sono uguali ai valori di default):
// on document ready:
$(function(){
$('#slider-id').fleXlider({
aspect : 16/9, // aspect-ratio (float)
threshold : 25, // min distance after a swipe movement to move to next/prev slide
allowScroll : true, // allow vertical scroll when touching
arrowClass : 'onhover', // "hide" : don't display prev and next arrows;
// "onhover" : display if mouse over;
// "" : always visible. Can be customized
bulletClass : '', // as arrowClass, fot bullets navigator
autoPlay : false, // start slider automatically
playDuration : 3000, // how long keep a slide
pauseOnHover : true, // pause when mouse over
allowSwipeIframe : false, // slides with inner iframe became touch friendly, but you cannot interact with the iframe content
// false: iframe as it is, no touch enabled;
// true: iframe not clickable, swipe enabled;
// if slide has class "video": allow click only on center of iframe (where play button often is)
cinema : { // custom callbacks for -supported- videos
onstart : function(i){}, // custom callbacks optionally pass the iframe id as parameter
onpause : function(i){},
onend : function(i){}
}
});
//to support youtube videos, call this function after you initialized all sliders.
fleXlider.supportVideo();
});
Per accedere alle API dello slider si richiami l'attributo data dal contenitore:
// get fleXlider object
var myFXSlider = $('#slider-id').data('fleXlider');
/*
editable parameters:
* threshold
* allowScroll
* autoPlay
* playDuration
* pauseOnHover
* cinema
*/
//example: edit threshold and cinema.onstart function
myFXSlider.threshold = 40;
myFXSlider.cinema.onstart = function(iframeID){
$('#'+iframeID).addClass("babau");
};