♪
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ésultatresultat
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 |
|
autoHeightEaseDuration |
Durée de l'animation de autoHeight. |
Nombre de millisecondes |
|
autoHeightEaseFunction |
Définit le type d'animation de autoHeight |
N'oubliez pas les "" |
|
autoSlide |
Définit si la transition entre les slides se fait automatiquement ou non. |
true,false,1,0 |
|
autoSlideInterval |
Définit le temps de transition entre les slides. Cette option s'utilise avec autoSlide. |
Nombre de millisecondes |
|
autoSlideStopWhenClicked |
Définit si la transition automatique entre les slides se stoppe si l'utilisateur clique sur le slide. |
true,false,1,0 |
|
crossLinking |
Définit un lien permanent à chaque slide via un hash d'URL. (ex. : http://monslider.com/#4). |
true,false,1,0 |
|
dynamicArrows |
Définit si Coda-Slider doit générer les boutons suivant et précédent. |
true,false,1,0 |
|
dynamicArrowLeftText |
Définit le texte du bouton précédent. |
Ce que vous voulez. |
|
dynamicArrowRightText |
Définit le texte du bouton suivant. |
Ce que vous voulez. |
|
dynamicTabs |
Définit la présence ou non de boutons pour naviguer entre les slides. |
true,false,1,0 |
|
dynamicTabsAlign |
Définit la position horizontale des boutons. |
« center »,« left »,« right » |
|
dynamicTabsPosition |
Définit la position verticale des boutons |
« top »,« bottom » |
|
firstPanelToLoad |
Définit le 1er slide qui sera chargé et affiché par le plug-in. |
Numéro du slide |
|
slideEaseDuration |
Définit le temps de l'animation pour afficher le slide. |
Nombre de millisecondes |
|
slideEaseFunction |
Définit l'effet de transition entre les slides. |
N'oubliez pas les "" |
VI. Liens externes▲
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).