É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
});
});