Éste ejemplo muestra cómo crear un slider con bxSlider. Es uno de los muchos plugins que hay pero me resultó sencillo de utilizar.
En el head de la página:
<head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="js/bxslider.js"></script> </head>
En el body:
<div id="slider"> <div class="slide"> <img src="images/img1.jpg" /> <p>El primer texto de la secuencia</p> </div> <div class="slide"> <img src="images/img2.jpg" /> <p>El segundo texto de la secuencia</p> </div> </div>
Ahora lo ponemos mono con unos pocos estilos:
.slider, .slide { width: 675px; height: 196px; position: relative; } .slide p { margin: 0; z-index: 999; position: absolute; bottom: 0; background: #333; opacity: 0.8; width: 100%; height: 40px; color: #dedede; text-align: center; line-height: 40px; }
Y por último, el script para inicializar el slider:
$(document).ready(function() { $('#slider').bxSlider({ mode: 'fade', auto: true, speed: 2000, pause: 8000, controls: false }); });