Sliders jQuery facile
Voici un petit tutoriel très simple pour la mise en place d’un sliders d’images jQuery avec description et nom du plus bel effet.
Etape 1: HTML
Dans le body de votre page placé:
<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>
Etape 2: Le CSS
*{
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;}
Etape 3: charger les librairies Javascript associées dans le Head de la page
Step 4 : le codejQuery sliders:
pour éxécuter le tout placer ce code dans votre page
<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>
Facile et fonctionne le tour est joué!
Loading ...
1 Response to "Sliders jQuery facile"
Sympa mais ce qui est dommage c’est que si le javascript est désactivé y a rien qui apparait, les images ne sont pas accessible.