07
JUIL

Créer votre propre slideshow design avec jQuery

Publié le 07/07/09 à 08h17 par DJo

DreamCSS met à disposition des internautes un Tutorial très intéressant qui explique comment créer son propre slider d'images en jQuery.

créer son propre slider d'images en jQuery.

Etape 1: Le code HTML

Commençons par la base du slider, l'architecture HTML.

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Toutes vos images doivent être placées dans la div slide-runner avec un ID distinct et la class "slide"

 

Etape 2: Une couche de CSS

Il faut maintenant cacher les images et mettre en forme notre slider de façon design.

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;} 

Vous pouvez récupérer les images utilisées dans le CSS sur la démo en ligne.

 

Etape 3: les données de notre slider

Il faut ensuite associer à nos images une légende, un titre etc. en Javascript

<script type=" text="" javascript="">
if(!window.slider) var slider={};
slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},
{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},
{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>

 

Etape 4: On charge les librairies Javascript dans la page

Dernière étape, charger dans le head de notre page, les librairies Javascript nécessaires à l'animation de notre slider d'images:

  <script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>

Le script "script.js" est téléchargeable sur le site officiel de ce tutorial.

 

En quelques étapes, vous aurez un slider d'images élégant et fonctionnel ! Facile non ?

Site officiel et Démo

Baraguiné par le 11/07/09 à 18h50
Bonjour,

Merci pour ce magnifique slide show.
Une petite erreur c'est glissé dans votre code.
Il faut remplacer par
Baraguiné par le 11/07/09 à 18h51
ah mince désolé mais il manque le code
donc je recommence!
Il faut remplacer
(script type=" text="" javascript="") par
(script type="text/javascript")
Baraguiné par echos le 12/03/10 à 17h46
echos sur La Ferme du Web
Je cherche un slider, ou gallerie d'images avec Thumbnails sur le coté.
Un peu comme sur le theme Monographe de Wordpress ( http://ericulous.com/2009/08/21/wp-theme-monograph/). Savez-vous si il existe en Plugin ?.?.
Merci
Baraguiné par O_Ghislain le 30/11/10 à 16h12
O_Ghislain via Twitter
Salut,
Lien de démo et mort :)
Merci
A
Baraguiné par Sergei007 le 09/11/12 à 10h02
Sergei007 sur La Ferme du Web
Bonjour, je m'intéresse à ce slider jquery car il est pratique pour afficher les descriptions mais aussi pour afficher des images via XML.

Savez-vous quelle fonction ajouter ou dupliquer pour ajouter une flèche de navigation ?

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web