Slider facile avec JQuery

Star/Stop Slider est un slider plutôt facile à intégrer.
Ce script basé sur Jquery permet de faire défiler des images accompagnés de texte.
Vous pouvez voir son intégration aux couleurs du site sur la page Madwin.

Voici le code à ajouter :

HTML
Le html dans le corps de la page entre les balises body
<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<h1>Garden Rack</h1>
<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href="#"><img src="images/slide-1-image.png" alt="En savoir plus" /></a>
</div>
... autre contenu ...
</div>
</div>

Javascript
Entre les balises head ajoutez les balises de script après les avoir télécharger :
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>

CSS
Les CSS dans un fichier style externe ou à ajouter avec des balises style :
#slider { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
position: relative; margin: 50px 0; }
#mover { width: 2880px; position: relative; }
.slide { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1 { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
color: #ac0000; }
.slide p { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img { position: absolute; top: 20px; left: 400px; }
#slider-stopper { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

Il s'intègre également assez facilement à la lecture d'un flux RSS via Magpie.

Un exemple avec Jeux gratuits qui exploite un flux RSS externe et le slider.

Start/Stop Slider | CSS-Tricks