Slider de contenidos con jQuery

Slider de contenidos con jQuery

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

Ver ejemplo