Sliders jQuery facile

tb-slidersjqueryVoici 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.

sliders-jquery

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

<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>

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é!

Voir le Site Officiel

Pour la Démo c’est par ici

1 commentaire
  1. Gaby22 9 années ago

    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.

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

20 − 15 =

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?