Intégration d'une légende dans un slideshow jquery

Bonjour,

Je lutte sur un site statique que je réalise avec trois mois de formations... Alors je me permet de faire appel à votre aide :-)

Voici mon site (en pleine construction) http://cevek.fr/
Soyez indulgent c'est mon premier saut sans parachute... :-)

J'aimerais dans Portefolio mettre une légende qui défile en même temps que mes photos... Simple dis comme ça mais vous ne pouvez pas imaginer à quel point je galère...
Est ce que vous auriez une astuce, une idée ?
Voici ci dessous mon code (pour le premier slide par exemple)
J'espère que ça sera assez clair pour vous...

Merci d'avance pour vos retour !!
Bonne soirée ;-)


HTML :

<div id="masque" class="masquons">
<div id="bandeau">
<img src="images/portfolio/1.png" alt="vue1">
<img src="images/portfolio/2.png" alt="vue2">
<img src="images/portfolio/3.png" alt="vue3">
<img src="images/portfolio/4.png" alt="vue4">
<img src="images/portfolio/5.png" alt="vue5">
<img src="images/portfolio/6.png" alt="vue6">
<img src="images/portfolio/7.png" alt="vue7">
<img src="images/portfolio/8.png" alt="vue8">
<img src="images/portfolio/9.png" alt="vue9">
<img src="images/portfolio/10.png" alt="vue10">
<img src="images/portfolio/11.png" alt="vue11">
<img src="images/portfolio/12.png" alt="vue12">
<img src="images/portfolio/13.png" alt="vue13">
</div>

<div class="navigation" id="navigation1">
<a id="precedent" href="#" title="Précédent">
<img src="images/prev.png" alt="Précédent"></a><a id="suivant" href="#" title="Suivant"><img src="images/next (1).png" alt="Suivant">
</a>

</div>
</div>


$(function(){
var vue = 1;

$("#suivant").click(function(){
if(vue < 14){
$("#bandeau").animate({
left:"-=600px"
});
vue++;
}

if(vue==14){
$("#bandeau").animate({
left:"0px"
});
vue =1;
}
});

$("#precedent").click(function(){
if(vue > 1){
$("#bandeau").animate({
left:"+=600px"
});
vue--;
}
});


});


CSS :


#masque {
width:600px;
height:400px;
overflow:hidden;
position:relative;
margin:0 auto;
}

#bandeau {
width:7800px;
height:400px;
position:relative;
}

#bandeau img {
float:left;
}

.navigation {
width:600px;
height:50px;
background:#000;
background:rgba(0,0,0,0.7);
position:absolute;
z-index:1;
bottom:0;
left:0;
}

.navigation a {
display:block;
width:42px;
padding-bottom:5px;
padding-top:12px;
float:left;
}

.navigation p {
color:#f5ece7;
padding-top:10px;
font-family:'Advent Pro', 'sans-serif';
}