Cours et tutoriels sur la création de site
Nos scripts
MySpeach
MySpeach est un chat php sans base de donnée, rapide, léger et facile à prendre en main. DEMO
MyPHPUpload
MyPHPUpload est un script d'upload sécurisé écrit en PHP. DEMO
GrapAgenda
Agenda PHP et MySQL avec comptes utilisateurs et administration. DEMO
Livre PHP
Slideshow javascript avec Easy Slider + jQuery
Cours / tutoriel écrit le 05-08-2010 par sky
Un slideshow javascript qui utilise jQuery et Easy Slider
C'est pas facile de trouver un slideshow qui soit simple, sans trop de fioriture mais avec le minimum syndicale niveau fonctionnalités.
Easy Slider est le premier qui correspond à mes besoins.
Easy Slider est un plugin jQuery qui permet de créer un slideshow très simplement.
Site de l'auteur du slideshow : http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
J'ai mis en place une petite démo toute simple d'une utilisation du slideshow avec une navigation numérique, un démarrage automatique et une lecture continue : demo slideshow
Voici le code HTML + Javascript de la démo :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exemple de slideshow javascript avec Jquery et Easy Slider 1.7</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="./css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true,
speed:800,
pause:3500
});
});
</script>
</head>
<body>
<div id="slider">
<ul>
<li><a href="/"><img src="./images/01.jpg" alt="Première image" /></a></li>
<li><a href="/"><img src="./images/02.jpg" alt="Deuxième image" /></a></li>
<li><a href="/"><img src="./images/03.jpg" alt="Troisième image" /></a></li>
<li><a href="/"><img src="./images/04.jpg" alt="Quatrième image" /></a></li>
<li><a href="/"><img src="./images/05.jpg" alt="Cinquième image" /></a></li>
</ul>
</div>
</body>
</html>
Voici les paramètres d'options que prend Easy Slider :
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
Les paramètres de configuration du slideshow traduit en français :
prevId
ID du bouton "previous". Par défaut est "prevBtn".
prevText
Texte pour le bouton "previous". Par défaut est "Previous".
nextId
ID du bouton "next". Par défaut est "nextBtn".
nextText
Texte pour le bouton "next". Par défaut est "Next".
orientation
Le slideshow peux être horizontal ou vertical. Horizontal est la valeur par défaut.
Mettre 'vertical' pour une orientation verticale.
speed
Vitesse de l'animation de transition entre les images. par défaut : 800.
controlsShow
Par défaut est égale à true, mais si mis à false ça ne va pas ajouter de contrôleurs.
Ca peux être utiliser avec auto scroll quand on veux désactiver l'interaction de l'utilisateur.
controlsBefore et controlsAfter
On peux ajouter des balises supplémentaires pour gagner plus de contrôle sur les boutons en utilisant ses paramètres.
controlsFade
Est égale à true par défaut. Si mis à false, les boutons ne seront pas cachés quand le slider arrive à la fin.
firstShow et lastShow
Ses paramètre cache ou affiche les boutons "go to first" et "go to last".
auto
Cette options permet le sliding automatique.
Si mis à true, le sliding (défilement) va commencer automatiquement et continuer jusqu'à que l'un des boutons soit cliqué.
pause
Cette option permet de définir en milliseconde la pause entre chaque animation quand le sliding (défilement) est en "auto". (slideshow jQuery)
continuous
Si mis à true, le fais de cliquer sur le bouton "next" quand le slider arrive à la fin, il retournera simplement au début.
En combinant cette option avec auto (tous les deux mis à true) on obtient une animation infini.
numeric (nouveau !)
Si mis à true on obtiendra une navigation numérique à la place des boutons next et prev.
Le plugin va créer une liste ordonnée juste après le div du slider.
numericId (nouveau !)
Cette option permet de définir une ID pour chaque liste ordonnée.
Très pratique pour le stylage CSS de la liste.
Commentaires
jean-marie le 16-08-2011
Bonjour
Je ne comprends ce qu'il faut modifier pour mettre le slide en horizontal.
Merci pour votre aide
Tibo le 20-07-2011
Bonjour à tous,
Je suis débutant et j'essaie de comprendre tant bien que mal le java donc je galère un peu. En fait, je voudrais "juste" avoir des flèche de texte (< et >) pour contrôler le slider. Est-ce quelqu'un un peut me dire comment je peux faire merci :D
vince le 28-04-2011
salut et merci pour ce tuto !
J'aurais juste une question, est-ce que on peut centrer les numéros en dessous des images
et puis comme certains plus haut, si le defilement pouvait repartir après avoir cliquer sur un chiffre...
sky le 30-03-2011
XeN, le contrôle de l'emplacement de la navigation peux se faire via du CSS. Regarde du côté de /* numeric controls */ ou encore ol#controls
XeN le 29-03-2011
Super ce script ! merci
J'ai une petite question(de troll sans doute...), est-ce qu'il est possible (si oui comment) de mettre la navigation numérique avant(en haut) le slider ?
merci encore pour votre site !
AkiraSurvivor le 22-03-2011
Pour corriger le li en trop en vertical remplacer la ligne (n°75) :
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
Par :
if(!options.vertical) {
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
}
sky le 18-02-2011
Je ne crois pas que ce soit possible
Jérôme le 17-02-2011
Bonjour, le tuto et le script sont excellents, mais j'ai la même question que Justine :
Justine le 18-11-2010
Super ce Easyslider !
Par contre quand on clique sur un chiffre de la navigation numérique, le slider ne repart pas ensuite, il faut recharger la page pour le relancer ... Quelqu'un aurait t il une idée ? je suis sure que ca n'est pas grand chose a changer ... mais je ne trouve pas ...
Un peu d'aide ?
Merci d'avance !
Justine le 18-11-2010
Super ce Easyslider !
Par contre quand on clique sur un chiffre de la navigation numérique, le slider ne repart pas ensuite, il faut recharger la page pour le relancer ... Quelqu'un aurait t il une idée ? je suis sure que ca n'est pas grand chose a changer ... mais je ne trouve pas ...
Un peu d'aide ?
Merci d'avance !
Anlore le 12-11-2010
Merci, très bon tuto !
Cependant j'ai une question, est-ce possible de rajouter une zone texte sur les images qui défilent, exemple, du texte sur un fond grisé transparent pour voir l'image derrière ? Si vous pensez que c'est possible je veux bien de votre aide, merci !!
sky le 14-10-2010
Merci pour vos commentaires, je vais arranger ça dès mon retour.
Maxidac le 05-10-2010
Bonjour,
Tout d'abord, c'est un très bon article et qui m'a été bien utile.
Cependant j'ai un souci avec le vertical, un <li></li> vierge viens se placer en première positions pour je ne sais quelle raison.
Pouvez vous m'aider?
PacoSxm le 03-10-2010
Attention, il subsiste un bug quand on active le vertical : ligne 134 de easySlider1.7.js
$("ul",obj).css("margin-left",(t*h*-1));
remplacer par :
$("ul",obj).css("margin-top",(t*h*-1));
sinon chaque image se décale vers la gauche...
Liens - Qui sommes-nous ? - Informations légales - Contact - © viaPHP.net