Réaliser un plugin de slider automatique

Le principe de ce slider minimaliste est simple : un "ul" et des "li" qui sont animés d'une translation vers la gauche par un "setInterval". Une fois la translation terminée, le "li" est basculé en dernière position.

Les li se succèdent en boucle. On peut ainsi faire défiler du texte ou des images.

Exemple

Code CSS : 

#sfSlider { display: none; font-family: verdana; font-size: 12px; }

Code HTML : 

<ul id="sfSlider">
    <li>
            <p>contenu 1 </p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris porttitor 
            pretium tellus in hendrerit. Nunc in ante libero. 
        </li>
    <li> <p>contenu 2 </p>
            Cras vulputate massa ac nisi gravida in vestibulum dui tristique. 
            Pellentesque habitant morbi tristique senectus et netus.
        </li>
    <li> <p>contenu 3 </p>
            Cras vulputate massa ac nisi gravida in vestibulum dui tristique, 
            fames ac turpis egestas  et malesuada .  
        </li>
    <li> <p>contenu 4 </p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada 
            fames ac turpis egestasfames ac turpis egestas. 
        </li>
    <li> <p ><strong>contenu 5</strong></p>
            Morbi lobortis enim in libero sodales cursus. Vestibulum non nisl nibh, 
            et viverra erat. Etiam ut sem eu urna sagittis porta vel.
        </li>
    <li> <p>contenu 6 </p>
            Mauris id orci neque. Ut rutrum tristique lacinia. Praesent elementum, 
            sem sed mattis facilisis, nibh nibh imperdiet augue.
        </li>
    <li><i>contenu 7</i><br/>
            Quis tortor vel dapibus magna tortor eleifend turpis. Aenean fringilla 
            urna eu nisi dictum ut egestas dolor suscipit. 
        </li>
    <li> <p>contenu 8 </p>
            Et après ce contenu-ci on recommence au premier contenu... !
        </li>
</ul>

Code JS : 

    (function(SF){
        /* SpaceFrog's simplisitc Slider plugin
         * Juste pour faire défiler des balises li et leur contenu de gauche à droite en boucle
         */
        SF.fn.SF_SimpleSlider = function(options){
            /* en option la taille de la zone de défimement,
            * la vitesse des transitions
            * la durée de pause entre les transitions
            */
            var defaults={sWidth:200,sHeight: 20,sSpeed: 2000, sPause:6000},
                pos=-defaults.sWidth,
                $this=SF(this);
     
            // Ajoute les options dans defaults (modifie defaults).
            SF.extend(defaults, options);
     
            //Encapsule le ul dasn un div (la fenetre de défilement)
            $this.wrap($("<div\/>").attr('id',"sHolder").css( {"border":"solid 1px grey",
                                                               "border-bottom":"double 3px grey", 
                                           "border-right":"double 3px grey",
                                           "height":defaults.sHeight,
                                           "width":defaults.sWidth,
                                           "margin":0,
                                           "padding":"0 5px",
                                           "overflow":"hidden"}));
     
            //applique le style css aux li
            $this.children('li').css({"margin":"0 5px 0 0", 
                                      "padding":0,"border":0,
                                      "width":defaults.sWidth,
                          "height":defaults.sHeight,
                          "float":"left", 
                          "display":"inline-block"});
     
            //applique le style à l'ul
            $this.css({"margin":0, "padding":0, "border":0,
                   "width":defaults.sWidth*2, 
                   "list-style-position":"inside", 
                   "list-style-type":"none",
                   "display":"block"});
     
            //lance la rotation des lis
            setInterval(function(){
                $this.children(":eq(0)").animate( {"margin-left":-defaults.sWidth-10} , 
                                                     defaults.sSpeed, "swing",function(){
                    $this.append($this.children(":eq(0)").css({"margin-left":0}));
                });
            }, defaults.sPause); // Temps de pause entre deux défilememnts
     
            return this;
        };
     })(jQuery);
     
     $('#sfSlider').SF_SimpleSlider({sWidth:400,sHeight:80});