SummArg | Cursos y recursos para webmasters

30/09/2011

Slider jQuery minimalista para cualquier contenido: bxSlider

bxSlider puede resultar un buen caballito de batalla, ya que es totalmente minimalista, admite varias opciones y permite que insertemos cualquier tipo de contenido dentro de nuestros slides. Entre sus puntos destacables encontramos:

  • Transiciones horizontales y verticales con o sin efecto fade.
  • Mover y mostrar varias slides por vez (carousel)
  • Controles de anterior, siguiente, paginado o automático.
  • Transiciones con el plugin easing.
  • Inicio aleatorio
  • Modo “Ticker”
  • Funciones callback anterior, siguiente, primero, último, etc.
  • Posibilidad de modificar el estilo vía CSS
  • Etc.

Para utilizarlo en nuestro proyecto primero debemos descargar el script y vincularlo a nuestro documento junto con el framework jQuery de la siguiente manera:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').bxSlider();
});
</script>

Con eso también indicamos que el contenido de nuestro slider estará en el div con ID slider. Ahora colocamos algún contenido:

<div id="slider">
<div>Slide one content</div>
<div>Slide two content</div>
<div>Slide three content</div>
<div>And so on...</div>
</div>

Y listo! También admite el contenido en listas <ul>. Les recomendamos descargar el .zip desde github ya que en dicha ubicación se encuentra también un archivo de estilos y varias imágenes bonitas para los controles del slider (en la carpeta /bx_styles/).

Demo y página del proyecto | Descarga desde github

Dejar un comentario

  1. Muchas gracias! es muy util!

Dejar un comentario