Image de l'article Slider javascript gratuit, léger, autonome avec animations CSS 3

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

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

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 ?

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.

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 :

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-'].

 

Image Viewer