[JS] Unslider : Slider jQuery

Unslider est un slider jQuery. Son point fort est la sobriété. Unslider fait le minimum et le fait bien ! Toutefois, ses 3kb n’empêche pas Unslider de répondre à un cahier des charges rigoureux :

  • Compatibilité avec les navigateurs : le grand jeu avec les derniers navigateurs, mais sait se tenir avec les plus anciens.
  • Support de la navigation au clavier : Utilisation des touches fléchées droite et gauche.
  • Hauteur d’image différente : Toutes les diapos ne sont pas égales et Unslider ajoute une subtile transition entre les slides de hauteur différente.
  • Responsive : Parce que les sites non-responsives se font de plus en plus rares.

Le marquage HTML

Un peu de CSS

.banner{ position: relative; overflow: auto; }
.banner li{ list-style: none; }
.banner ul li{ float: left; }

L’appel de Unslider

$(function(){ $('.banner').unslider(); });

Ajout des liens Suivant et Précédent







	var unslider = $('.banner').unslider();
	$('.unslider-arrow').click(function(){
		var fn = this.className.split(' ')[1];
		// Either do unslider.data('unslider').next() or .prev() depending on the className
		unslider.data('unslider')[fn]();
	});

Ecrans tactiles

Pour finir, si vous désirez ajouter à Unslider les fonctionnalités tactiles pour prendre en compte les écrans touch, il suffit d’inclure le plugin jQuery.event.swipe, et voilà !

Unslider est disponible sur GitHub.