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

Itard Julien

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.
Commentez ♪

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

- Auteur : Itard Julien

- Parution : 24 février 2010

- Licence : 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 œuvre intellectuelle protégée par les droits d'auteur. 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- 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

Les options de Coda-Slider

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 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 ici pour avoir un aperçu des animations disponibles.

N'oubliez pas les ""
Default : « easeInOutExpo »

VI - Liens externes

- Site officiel : ici

- Démonstration : ici

- Options disponibles du plug-in sur le forum : 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).