KISSlider: slider responsive, semantico e minimale

Ieri un amico mi ha chiesto aiuto per uno slider in jQuery: lui si appoggiava a un plugin che non capiva come funzionava (Responsive Slider, stranamente famoso). Guardando il codice non capivo come potesse servire un simile pachiderma (divisione in categorie, markup inutile, 200 righe di Javascript) per creare un semplicissimo slider di immagini.
Così mi è venuto lo stuzzichio di scriverne uno da solo, e nel giro di 20 minuti era pronto. Responsive, semantico e con circa 30-40 righe di codice in totale.
Sono rimasto stupito pure io (sono io fenomeno o loro ritardati?).

Il markup
Il markup è fatto per essere semplice, semantico e facile da scrivere anche a mano, quindi concreto e pulito.
Il vantaggio è che spesso un markup semantico è anche più human-readable e viceversa: due piccioni con una fava.
<div class="slider">
<div class="slides">
<img src="images/1.jpg" />
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/1a.jpg" />
<img src="images/1b.jpg" />
<img src="images/1c.jpg" />
<img src="images/2a.jpg" />
<img src="images/2b.jpg" />
</div>
<div class="commands">
<button class="slide-command back">&lt;</button>
<button class="slide-command next">&gt;</button>
</div>
</div>

Il div slider fa da contenitore: in slides abbiamo tutte le immagini che compongono lo slider, mentre in commands due button per navigare lo slider.
Come vedremo più avanti, lo slider non usa le immagini ma lo sfondo di slides per mostrare le slide, i tag immagine hanno una funzione semantica e intuitiva per la costruzione dell’HTML. Passare un array con i percorsi delle immagini infatti è decisamente poco semantico, mentre un markup più elaborato diventa pesante & difficile da impostare manualmente e complicato anche da mantenere.

Il CSS
.slider {width: 100%;}
.slider > * {width: 100%; height: 500px;}
.slides {background: no-repeat center #fff; background-size: 100%;}
.slides img {width: 100%; display: none;}
.commands {position: absolute; top: 0; left: 0;}
.slide-command {position: absolute; width: 90px; height: 100%; font-size: 80px; padding: 0 15px; font-weight: bold; background: none; cursor: pointer; color: #000;}
.slide-command:hover {background: rgba(255, 255, 255, .1);}
.slide-command.back {left: 0;}
.slide-command.next {right: 0;}

Il CSS si occupa di disporre il layout dello slider: nascondiamo le immagini, portiamo i comandi ai due lati dello schermo e definiamo come mostrare lo sfondo con l’effettiva slide. Con no-repeat mostriamo la slide solo una volta e non ripetuta lungo tutto il background, con center la portiamo al centro, e specialmente impostiamo la larghezza dello sfondo al 100%, in modo da allargarsi lungo tutto lo slider ma conservando le proporzioni.
Un analogo effetto si ottiene con il valore cover, ma in questo modo avremo un supporto browser limitato.
Usando lo sfondo con queste proprietà riusciamo a ottenere un layout responsive: l’immagine sarà sempre centrata e scalata alla larghezza massima dello slider senza perdere il rapporto d’aspetto originale.

Javascript
$(function() {
$(".slides").css("background-image", "url('" + $(".slides img:first-child").addClass("selected").attr("src") + "')");
$(".slide-command").click(function() {
var slide = $(this).hasClass("next") ?
(!$(".slides .selected").next().length ? $(".slides img").first() : $(".slides .selected").next()) :
(!$(".slides .selected").prev().length ? $(".slides img").last() : $(".slides .selected").prev());
$(".slides .selected").removeClass("selected");
$(".slides").animate({opacity : 0}, function() {$(this).css("background-image", "url('" + slide.addClass("selected").attr("src") + "')").animate({opacity: 1});});
});
});

Per il codice js ci appoggiamo a jQuery (ma essendo ormai incluso nella maggior parte dei progetti e molto utile anche per piccole cose, non lo vedo come un handicap), rendendo così il codice ancora più conciso.
Passando a $() una funzione la registriamo per l’evento ready della pagina, così da essere eseguita subito (un equivalente evoluto dell’onload insomma).
Questa funziona si occupa innanzitutto si mostrare la prima slide, impostando la src del tag corrispondente come background-image di slides.
A questo punto registra gli eventi click dei due pulsanti di navigazione: gli handler trovano la nuova immagine da mostrare, controllando se è alla fine o all’inizio ed eventualmente facendolo proseguire in loop, quindi la impostiamo sempre come sfondo di slides ma con un’animazione di cross-fading. Prima portiamo l’opacità a zero, quindi nel callback settiamo lo sfondo e rianimiamo l’opacità fino a 1.

Trovate una demo qui