Plugin jQuery iosSlider pour un slider compatible smartphones !

Le plugin jQuery iosSlider fait partie de la gamme des sliders jQuery (d’ailleurs, tu peux voir tous les plugins jQuery de slider évoqués sur ce site). Il a, par contre une spécificité, il a été développé pour être optimisé sur les smartphones.

L’avantage de ce slider est que pour passer d’une slide à une autre, un simple « slide » du doigt (mouvement de translation vers la gauche ou la droite du doigt sur l’écran) sur la zone du slider est nécessaire, pas besoin de cliquer et éventuellement de zoomer sur une flèche de navigation ! Ainsi cela reproduit le comportement des applications d’affichage de photos présents sur les smartphones (Android et iPhone).

Pour ajouter un iosSlider, c’est très simple. Tout d’abord une structure HTML à respecter :

<!-- slider container -->
<div class = 'iosSlider'>
	<!-- slider -->
	<div class = 'slider'>
		<!-- slides -->
		<div class = 'slide'>...</div>
		<div class = 'slide'>...</div>
		<div class = 'slide'>...</div>
	</div>
</div>

Une pointe de CSS à ajouter (je ne le remets pas ici, tu sauras le trouver sur le site du plugin !). Et enfin le code jQuery en lui-même :

/* un iosSlider avec des paramètres personnalisés */
$('.iosSlider').iosSlider({
	snapToChildren: true,
	scrollbar: true,
	scrollbarHide: false,
	desktopClickDrag: true,
	scrollbarLocation: 'bottom',
	onSlideChange: changeSlideIdentifier
});

Le plugin jQuery propose plein d’options différentes (une trentaine) qui permettent de le configurer à sa sauce. Et cerise sur le gâteau, le plugin peut être configurer pour être responsive !

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

Une reponse a Plugin jQuery iosSlider pour un slider compatible smartphones !

  1. totodernoncourt dit :

    Bonjour. Est-il possible d’utiliser plusieurs sliders (le iosslider) sur une même page ?
    Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *