Réaliser un slider facilement grâce au plug-in jQuery Coda-Slider

Date de publication : 24 février 2010

Par Itard Julien (http://ritter-jack.developpez.net)
 

4 commentaires · Donner une note à l'article (4.5) Le framework jQuery de JavaScript est un outil puissant qui a su s'imposer comme étant un framework de référence pour le développement Web.

Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites      



I. Introduction
II. Installation de Coda-Slider
III. Le code HTML
IV. Le code JavaScript
V. Les différentes options
VI. Liens externes
VII. Remerciements


I. Introduction

Ce plug-in jQuery, sous licence MIT et GPL, a été conçu par Niall Doherty et est fortement inspiré du slider Panic Cola.
Il permet de présenter n'importe quel contenu HTML sous la forme d'un slider, qui est bien entendu entièrement modifiable en éditant le fichier CSS.

Voici le résultat que vous devriez obtenir très facilement à la suite de cet article : Résultat


Les nouveautés de la V 2.0 :
  • défilement automatique des slides possible ;
  • 1er onglet affiché paramétrable ;
  • vitesse de défilement et animation ajustable.
De plus, les liens vers les différents slides sont entièrement "SEO Friendly", c'est-à-dire qu'ils sont optimisés pour le référencement.
Ce plug-in nécessite trois fichiers JavaScript pour fonctionner : jQuery (fonctionne avec la dernière version de jQuery 1.4), le plug-in easing-jquery ainsi que le plug-in coda-slide lui-même.
Il est compatible avec tous les navigateurs pour peu que le JavaScript soit activé !


II. Installation de Coda-Slider


L'installation du plug-in est relativement simple, il suffit de :


  • télécharger cette archive et de l'extraire (avec Winrar ou Winzip par exemple). Elle contient tous les fichiers nécessaires ainsi qu'un exemple de slider qui pourra vous servir de modèle ;

  • intégrer la feuille de style demo-menu.css dans votre page contenant le slider(que vous pouvez renommer, ou incorporer à votre feuille de style). C'est via cette page CSS que vous pouvez modifier l'aspect du slider. Mais attention, ne changez pas le nom des .class ;

  • intégrer les trois scripts JavaScript en respectant l'ordre suivant : jQuery, easing et coda-slide.

Voici le code de base qu'il vous faut avant l'intégration du slider : 

				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
		<title>Coda-Slider 2.0</title>
		<meta http-equiv="Content-Language" content="fr" />
		
		<!-- Link du style CSS -->
		<link rel="stylesheet" href="coda-slider-2.0.css" type="text/css" media="screen" />

		<!-- Appel des différentes bibliothéques, attention à l'ordre !-->
		<script type="text/javascript" src="js/jquery-1.4.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/jquery.coda-slider-2.0.js"></script>
		
		<script type="text/javascript">
			// Vous placerez le code JS ici
		</script>
	</head>

	<body>
			<!-- Vous placerez le code HTML du slider ici -->
	</body>
	
</html>

Il ne vous reste plus qu'à y intégrer le code HTML et JavaScript de votre slider, ce que nous allons voir maintenant.


III. Le code HTML

Voici le code HTML de notre slider : 

<div class="coda-slider-wrapper">
	<div class="coda-slider preload" id="coda-slider"> <!-- L'id de ce div est important pour js-->
		
		<div class="panel"><!-- Slide 1-->
			<div class="panel-wrapper">
				<h2 class="title">Panel 1</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. <br/>
				Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. <br/>
				Ut enim massa, sodales tempor convallis et, iaculis ac massa.<br/>
				Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
			</div>
		</div>
		
		<div class="panel"><!-- Slide 2 -->
			<div class="panel-wrapper">
				<h2 class="title">Panel 2</h2>
				<p>Proin nec turpis eget dolor dictum lacinia. <br/>
				Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. </p>
			</div>
		</div>
		
		<div class="panel"><!-- Slide 3 -->
			<div class="panel-wrapper">
				<h2 class="title">Pannel 3</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>
				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. <br/>
				Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. <br/>
				Ut enim massa, sodales tempor convallis et, iaculis ac massa.<br/>
				Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
				<p>Proin nec turpis eget dolor dictum lacinia. <br/>
				Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. </p>
			</div>
		</div>
		
		<!-- Rajoutez autant de slides que vous le voulez -->
		
	</div>
</div>
Quelques précisions sur le code :
  • ne renommez pas les class, sinon le plug-in ne marchera plus ;
  • comme vous pouvez le remarquer, il n'y pas de div pour les boutons suivant et précédent. En fait, ils sont créés directement en JavaScript via le plug-in ;
  • la class 'title' correspond au nom du bouton pour aller à ce slide ;
  • le contenu du slide peut aussi bien être une image que du texte, voire les deux. Peu importe le nombre de lignes de HTML, la hauteur du slide s'adapte (vous pouvez désactiver cette option).

Vous pouvez voir que le code HTML est relativement simple, mais le JavaScript, quant à lui, l'est encore plus !


IV. Le code JavaScript

Il est à placer dans la partie prévue à cet effet comme indiqué dans le code de base.
Nous allons configurer notre slider de façon à ce que les slides changent automatiquement toutes les X secondes. Un clic sur le slide mettra en pause le défilement.

Vous allez voir que ceci est extrêmement facile grâce au plug-in coda-slide ! 

$().ready(function() {
	$('#coda-slider').codaSlider({
        autoSlide: true, // Active l'autoslide
        autoSlideInterval: 4000, // Temps en millisecondes entre chaque changement
        autoSlideStopWhenClicked: true, // Avec la pause lors du clic
		   
		autoHeight: true // Mettre à False pour enlever la fonction qui ajuste la hauteur du slide
    });
});
Le nom des différentes options est très explicite.
Il en existe bien entendu pas mal d'autres. Elles vous sont toutes expliquées dans la liste exhaustive suivante.


V. Les différentes options

Option Descriptif Valeur
autoHeight Ajuste dynamiquement la hauteur du slider en fonction de la taille de son contenu. true,false,1,0
Default : true
autoHeightEaseDuration Durée de l'animation de autoHeight. Nombre de millisecondes
Default : 1000
autoHeightEaseFunction Définit le type d'animation de autoHeight
Je vous invite à vous rendre en ici pour avoir un aperçu des animations disponibles.		 N'oubliez pas les ""
Default : "easeInOutExpo"
autoSlide Définit si la transition entre les slides se fait automatiquement ou non. true,false,1,0
Default : false
autoSlideInterval Définit le temps de transition entre les slides. Cette option s'utilise avec autoSlide. Nombre de millisecondes
Default : 7000
autoSlideStopWhenClicked Définit si la transition automatique entre les slides se stoppe si l'utilisateur clique sur le slide. true,false,1,0
Default : true
crossLinking Définit un lien permanent à chaque slide via un hash d'URL. (ex. : http://monslider.com/#4). true,false,1,0
Default : true
dynamicArrows Définit si Coda-Slider doit générer les boutons suivant et précédent. true,false,1,0
Default : true
dynamicArrowLeftText Définit le texte du bouton précédent. Ce que vous voulez.
Default : Left
dynamicArrowRightText Définit le texte du bouton suivant. Ce que vous voulez.
Default : Right
dynamicTabs Définit la présence ou non de boutons pour naviguer entre les slides. true,false,1,0
Default : true
dynamicTabsAlign Définit la position horizontale des boutons. "center","left","right"
Default : "center"
dynamicTabsPosition Définit la position verticale des boutons "top","bottom"
Default : "top"
firstPanelToLoad Définit le 1er slide qui sera chargé et affiché par le plug-in. Numéro du slide
Default : 1
slideEaseDuration Définit le temps de l'animation pour afficher le slide. Nombre de millisecondes
Default : 1000
slideEaseFunction Définit l'effet de transition entre les slides.
Je vous invite à vous rendre en ici pour avoir un aperçu des animations disponibles.		 N'oubliez pas les ""
Default : "easeInOutExpo"
Les options de Coda-Slider

VI. Liens externes

  • Site officiel : en ici
  • Démonstration : en ici
  • Options disponible du plug-in sur le forum : en ici

VII. Remerciements

Je tiens à remercier jacques_jean et Watcher dont la relecture attentive a permis d'améliorer significativement la qualité de cet article, ainsi que Bovino pour m'avoir fait confiance et de m'avoir permis d'intégrer l'équipe (tout comme Pi-2r).



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2010 Itard Julien. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.