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 *

*

deux × trois =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

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 ?