Carrousel prob. navigation.

Bonjour tout le monde !

Tout d'abord, j'espère que vous allez tous bien en ce début de journée et donc je vais vous exposer mon soucis.

Donc suivant le tutoriel du Carrousel en Javascript, il y a quelques lignes liées à la pagination qui est normalement générée par le fichier JS. Dans l'exemple, les <span> sont composé uniquement de texte et s'affiche dès qu'on code ceci :

elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find('.navigation').append('<span>'+i+'</span>');
}
elem.find('.navigation span').click(function(){ carrousel.gotoSlide($(this).text()); })

Or dans mon cas, mes <span> sont composées d'une div contenant une image ( qui est dans le background en css ).
Donc je n'arrive aucunement à les générer avec ce code vu qu'il n'y a pas de texte et qu'elles contiennent des <div>. Ce qui veut dire que je ne peux continuer ma progression dans le tutoriel ...

Quelqu'un aurait-il eu le même problème que moi ? Et aurait-il une solution à ce problème ? (Ce qui m'enlèverait une belle épine du pied)

Je vous laisse si dessous mes codes (dans l'ordre : html / css(scss) / javascript).

HTML

<div id="site">

<!--
<div class="navigation">
<span><div id="logo"></div></span>
<span><div id="formules"></div></span>
<span><div id="client"></div></span>
<span><div id="contact"></div></span>
</div>
-->
<div id="corps">
<div id="carrousel">
<div id="slide1" class="slide">
<div class="visu">

</div>
</div>
<div id="slide2" class="slide">
<div class="visu">

</div>
</div>
<div id="slide3" class="slide">
<div class="visu">

</div>
</div>
<div id="slide4" class="slide">
<div class="visu">

</div>
</div>
</div>
</div>

</div>

CSS(SCSS)

body{
background: #000;
background-image: url(degbg2.png);
background-attachment: fixed;
background-repeat: repeat-y;
background-position: center;
}

site{

height: 660px; width: 1000px;
margin: 0 auto;
margin-top: 50px;
position: relative;
}

span #logo{
width:160px; height: 160px;
top: 0; left: 0;
background: url(0.png) #fff no-repeat;
border: solid 1px #fff;
@include border-radius (10px 0px 0px 10px);
position: absolute;
cursor: pointer;
}
.navigation{

span #formules{
width:160px; height: 160px;
top: 166px; left: 0;
background: url(1.png) no-repeat;
border: solid 1px #fff;
@include border-radius (10px 0px 0px 10px);
position: absolute;
cursor: pointer;
}

span #client{
width:160px; height: 160px;
bottom: 166px; left: 0;
background: url(2.png) no-repeat;
border: solid 1px #fff;
@include border-radius (10px 0px 0px 10px);
position: absolute;
cursor: pointer;
}

span #contact{
width:160px; height: 160px;
bottom: 0; left: 0;
background: url(3.png) no-repeat;
border: solid 1px #fff;
@include border-radius (10px 0px 0px 10px);
position: absolute;
cursor: pointer;
}

}

corps{

width: 793px; height: 620px;
top: 0; right: 0;
padding: 20px;
background: #fff;
@include border-radius (0px 10px 10px 0px);
position: absolute;
}

carrousel{

width: 793px; height: 620px;
position: absolute;

}
.slide{
position: absolute;
top: 0; left: 0;
width: 793px; height: 620px;
}

slide1{

background: #123;
}

slide2{

background: #456;
}

slide3{

background: #789;
}

slide4{

background: #159;
}

JAVASCRIPT

var carrousel = {

nbSlide: 0,
nbCurrent: 1,
elemCurrent: null,
elem: null,

init : function(elem){
this.nbSlide = elem.find('.slide').length;

// Créer la pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find('.navigation').append('<span>'+i+'</span>');
}
elem.find('.navigation span').click(function(){ carrousel.gotoSlide($(this).text()); })

//Initialisation du carrousel
this.elem=elem;
elem.find('.slide').hide();
elem.find('.slide:first').show();
elemCurrent = elem.find('.slide:first');
},

gotoSlide : function(num){
alert(num);
}
}

$(function(){
carrousel.init($('#carrousel'));
});

Donc voilà, je ne suis pas un pro et toutes vos remarques ne pourront m'être que constructive.
PS: Je pense que c'est plutôt détaillé si vous voulez savoir quelques choses d'autres, je suis tout ouïe.

Merci d'avance à tous ceux qui prendront quelques minutes de leur temps à essayer de me sortir de la boue.

Cordialement Jack ;)