Slider javascript gratuit, léger, autonome avec animations CSS 3

Ce code vous permet de gérer un défilement. Il est :

Compatible avec un design adaptatif.
Ultra léger : 2 984 octets compressé.
Autonome : ne nécessite aucune librairie externe.
Moderne : génère des animations CSS 3.
Économe : se met en pause lorsque l'onglet n'est pas affiché.
Facile d'utilisation

Navigation rapide :

Télécharger le code
Voir des exemples
Liste des paramètres

Téléchargement

Télécharger jsSlide 1.2 compressée (2 984 octets).

Télécharger jsSlide 1.2 non compressée (5 571 octets).

Historique

Historique de développement de jsSlide, fonction javascript pour gérer des défilement.

Version 1.2 : 16/07/2018

Prend en compte les valeurs CSS margin, padding et border pour le calcul de la largeur des éléments. Dans les versions précédentes la largeur des éléments animés était calculé d'après la largeur du parent. Maintenant ce calcul tient compte du box model CSS.

Version 1.1 : 11/03/2017

L'animation est mise en pause lorsque l'onglet dans n'est pas en avant plan.

Version 1.0 : 21/12/2016

Première version.

Comment ça fonctionne ?

Créez 2 blocs HTML. Le premier définit la largeur d'affichage. Le second contiendra les éléments qui seront affichés les uns après les autres et sera animé.

Par exemple pour animer 4 images, vous pouvez utiliser la structure suivante :

<div id="bloc1">
	<div id="bloc2">
		// ajoutez ici les éléments qui seront animés
	</div>
</div>

Les éléments enfants sont redimensionnées d'après la largeur du #bloc1. #bloc2 est redimensionné d'après la largeur totale des éléments enfants.

Pour démarrer, il faut créer un objet jsSlide et passer les paramètres au constructeur.

<script type="text/javascript">
var slider = new jsSlide({
id: 'bloc2'
});
</script>

Que fait le code ?

Le code va fixer la largeur du bloc à animer.
Il va fixer la largeur des éléments enfants du bloc à animer.
Il va ajouter un événement resize à window. À chaque redimensionnement, la largeur des éléments enfants et du bloc seront recalculées.
Il peut ajouter des événements click sur des boutons précédent et suivant.
Il ajoute des transitions CSS sur l'élément à animer et lance l'animation avec une propriété transform: translateX.

Exemples de fonctionnement

Voici quelques exemples pour vous montrer comment utiliser ce slider javascript.

1) défilement automatique

<div style="width: 150px; height: 150px; overflow: hidden;">
	<div id="exemple1">
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cabin-957754_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cream-puffs-427181_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/croissant-1191391_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cupcake-252805_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/grasses-383896_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/hot-chocolate-1058197_1280_tn.jpg" width="150" height="150" alt="" />
	</div>
</div>
<script type="text/javascript">
var slider1 = new jsSlide({
id: 'exemple1',
autoplay: true,
});
</script>

2) bouton lecture pause / précédent / suivant

<div style="width: 150px; height: 150px; overflow: hidden;">
	<div id="exemple2">
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cabin-957754_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cream-puffs-427181_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/croissant-1191391_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cupcake-252805_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/grasses-383896_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/hot-chocolate-1058197_1280_tn.jpg" width="150" height="150" alt="" />
	</div>
</div>
<input id="exemple2Precedent" type="button" value="Précédent" /> 
<input id="exemple2Play" type="button" value="Lecture" /> 
<input id="exemple2Stop" type="button" value="Pause" /> 
<input id="exemple2Suivant" type="button" value="Suivant" /> 
<script type="text/javascript">
var slider2 = new jsSlide({
id: 'exemple2',
buttonNext: 'exemple2Suivant',
buttonPrev: 'exemple2Precedent',
buttonPlay: 'exemple2Play',
buttonStop: 'exemple2Stop'
});
</script>

3) Changer le type et la durée de transition

<div style="width: 150px; height: 150px; overflow: hidden;">
	<div id="exemple3">
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cabin-957754_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cream-puffs-427181_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/croissant-1191391_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/cupcake-252805_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/grasses-383896_1280_tn.jpg" width="150" height="150" alt="" />
		<img src="https://blog.niap3d.com/img/jsPhotoViewer/hot-chocolate-1058197_1280_tn.jpg" width="150" height="150" alt="" />
	</div>
</div>
<script type="text/javascript">
var slider3 = new jsSlide({
id: 'exemple3',
autoplay: true,
timingFunction: 'ease-in-out',
duration: 500,
intervalTiming: 1000
});
</script>

Les paramètres disponibles

Voici les paramètres disponibles pour le constructeur jsSlide.

id

Obligatoire : oui
Type attendu : String
Valeur par défaut : -

Identifiant du conteneur qui sera animé.

<div id="slider">
	<div id="sliderImg">
		<img src="image1.png" alt="" />
		<img src="image2.png" alt="" />
		<img src="image3.png" alt="" />
		<img src="image4.png" alt="" />
	</div>
</div>
<script type="text/javascript">
var slider = new jsSlide({
id: 'sliderImg'
});
</script>

callBack

Obligatoire : non
Type attendu : Fonction
Valeur par défaut : -

Fonction appellée au lancement de l'animation CSS. Le numéro du slide est passé en paramètre

<script type="text/javascript">var slider = new jsSlide({
id: 'contentImg',
autoplay: true,
callBack: maFonction
});

function maFonction(sliderNb){
	console.log('numéro de slide : '+sliderNb);
}
</script>

buttonPrev

Obligatoire : non
Type attendu : String
Valeur par défaut : -

Identifiant du bouton précédent.

<input id="btSuivant" type="button" value="Suivant" />
<script type="text/javascript">
var slider = new jsSlide({
id: 'contentImg',
buttonPrev: 'btSuivant'
});
</script>

buttonNext

Obligatoire : non
Type attendu : String
Valeur par défaut : -

Identifiant du bouton suivant.

<input id="btPrecedent" type="button" value="Précédent" />
<script type="text/javascript">
var slider = new jsSlide({
id: 'contentImg',
buttonNext: 'btPrecedent'
});
</script>

buttonPlay

Obligatoire : non
Type attendu : String
Valeur par défaut : -

Identifiant du bouton suivant.

<input id="btPlay" type="button" value="Lecture" />
<script type="text/javascript">
var slider = new jsSlide({
id: 'contentImg',
buttonPlay: 'btPlay'
});
</script>

buttonStop

Obligatoire : non
Type attendu : String
Valeur par défaut : -

Identifiant du bouton suivant.

<input id="btStop" type="button" value="Stop" />
<script type="text/javascript">
var slider = new jsSlide({
id: 'contentImg',
buttonStop: 'btStop'
});
</script>

intervalTiming

Obligatoire : non
Type attendu : Int
Valeur par défaut : 5000

Pause entre deux animations. Indiquez une valeur en millisecondes.

Ne confondez pas avec la valeur delay.

intervalTiming est utilisé par la fonction javascript setInterval();.
delay est utilisé par la propriété CSS transition.

var slider = new jsSlide({
id: 'contentImg',
intervalTiming: 3000
});

duration

Obligatoire : non
Type attendu : Int
Valeur par défaut : 1000

Équivalent de la propriété CSS transition-duration. Indiquez une valeur en millisecondes.

var slider = new jsSlide({
id: 'contentImg',
duration: 1000
});

timingFunction

Obligatoire : non
Type attendu : String
Valeur par défaut : 'linear'

Équivalent de la propriété CSS animation-timing-function. Vous pouvez utiliser n'importe quelle valeur disponible en CSS :

linear
ease
ease-in
ease-out
ease-in-out
step-start
step-end
steps(int, start | end)
cubic-bezier

var slider = new jsSlide({
id: 'contentImg',
timingFunction: 'ease-in-out'
});

delay

Obligatoire : non
Type attendu : Int
Valeur par défaut : 0

Équivalent de la propriété CSS transition-delay. Indiquez une valeur en millisecondes.

var slider = new jsSlide({
id: 'contentImg',
delay: 500
});

autoplay

Obligatoire : non
Type attendu : Boolean
Valeur par défaut : -

Si autoplay vaut true, l'animation est lancée dès l'initialisation de l'objet.

var slider = new jsSlide({
id: 'contentImg',
autoplay: true
});

prefix

Obligatoire : non
Type attendu : Array
Valeur par défaut : ['']

Liste des prefix que la fonction ajoutera à la propriété transition. Par défaut aucun préfix n'est utilisé.

Pour utiliser tous les préfix vous pouvez utilisez la liste ['', '-webkit-', '-moz-', '-o-', '-ms-'].

var slider = new jsSlide({
id: 'contentImg',
prefix: ['', '-webkit-', '-moz-', '-o-', '-ms-']
});

Je vous conseille d'utiliser une valeur vide et le préfix WebKit : ['', '-webkit-'].

Téléchargement

Historique

Version 1.2 : 16/07/2018

Version 1.1 : 11/03/2017

Version 1.0 : 21/12/2016

Comment ça fonctionne ?

Que fait le code ?

Exemples de fonctionnement

1) défilement automatique

2) bouton lecture pause / précédent / suivant

3) Changer le type et la durée de transition

Les paramètres disponibles

id

callBack

buttonPrev

buttonNext

buttonPlay

buttonStop

intervalTiming

duration

timingFunction

delay

autoplay

prefix

Image Viewer