bxSlider – Jquery Content Slider

Ayer navegando por internet me cruze con este lindo script que funciona bajo el framework de Jquery, el mejor framework de Javascript del momento. Y como justo necesitaba un slider para ponerle a mi blog me decidi a probarlo.

Para mi sorpresa funcionoó perfecto, y es super simple de implementar en tus desarrollos. Paso a comentar los parametros que admite.

Configuración:

• mode: ‘slide’, ‘fade’, ‘ticker’
• speed: tiempo de transición en milisegundos.
• auto: si es false, las transiciones son controladas por el click del usuarios
• pause: tiempo estren una transicion y otra (auto: solo true)
• width: Ancho del contenedor  (en pixels)
• prev_text: Texto (link) que se muestra para pasar al elemento anterior
• next_text: Texto (link) que se muestra para pasar al proximo elemento
• prev_img: Url de la imagen (link) que se muestra para pasar al elemento anterior
• next_img: Url de la imagen (link) que se muestra para pasar al proximo elemento
• ticker_direction: Direccion del slider (solamente en modo: ‘ticker’)
• wrapper_class: class name del contente wrapper generado automaticamente (para skinear y controlar mejor)

Aca les doy un ejemplo de como armar su slider de imagenes.

Primero que nada incluimos los archivos.

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’></script>
<script type=’text/javascript’ src=’js/jquery.bxSlider.js’></script>

Ahora llamamos al Script:

$('#example3').bxSlider({
mode: 'fade',
speed: 3000,
next_text: 'next image',
prev_text: 'previous image',
width: 307,
wrapper_class: 'example3_container'
});

Y ahora creamos los elementos:

<ul id="example3">
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade1.jpg" width="307" height="307" alt=""></a></li>
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade2.jpg" width="307" height="307" alt=""></a></li>
	<li><a href="http://ehackettworks.com/pix.php"><img src="images/fade3.jpg" width="307" height="307" alt=""></a></li>
</ul>

Listo! ya tienen su slider de imagenes!

Pruebenlo che, aca les dejo la url de bxSlider donde tambien van a encontrar algunos demos…

Cuentenme si les gusta, o si prefieren usar otro Script. Cual?