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.0 compressée (2 540 octets).

Télécharger jsSlide 1.0 non compressée (4 950 octets).

Comment ça fonctionne ?

Créez 2 blocs HTML. Le premier définit la largeur d'affichage. Le second contiendra les images 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 images sont redimensionnées d'après la largeur du #bloc1. #bloc2 est redimensionné d'après la largeur totale des images.

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

Article précédent : Région de France

Article suivant : Outil d'analyse gratuit de vos titres et descriptions de page HTML

 

Image Viewer