Slider Jquery ne loop pas

Bonjour,

Je n'arrive pas à créer un slider jQuery avec effet de fade entre 3 div.
ça fade bien sur les trois div, puis au moment de faire le loop, ça met les éléments à l'intérieur des slides en display:none.
De sorte que je perd l'intérieur des divs (logos, textes etc...)

Je me suis insprié de ce code qui sert à faire un fondu entre plusieurs images, mais en faisant un fondu entre plusieurs div ayant du contenu, ça fait buguer le contenu des div :

 $('#slides .slide:gt(0)').hide();
 setInterval(function(){
$('#slides :first-child').fadeOut().next('.slide').fadeIn().end().appendTo('#slides');
},4000);

Et voici mon HTML

<div id="slides">
        <section id="slider1" class="slide">
            <div class="main">
                <img src="assets/img/slider/logo.png"/>
            </div>
        </section>

        <section id="slider2" class="slide">
            <div class="main">

            </div>
        </section>

        <section id="slider3" class="slide">
            <div class="main">

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

Au début je les cache tous sauf le premier,
Ensuite je fadeOut l'un pour FadeIn le suivant, mais j'ai du mal à comprendre pourquoi ensuite il fadeOut des éléments à l'intérieur de mes sliders...

Avez-vous une idée ? :)
Merci