bxSlider: jQuery Slider de contenido responsivo

Stay hungry, stay foolish

Steve Jobs

bxSlider es un slider de contenido que trabaja con jQuery y lo más importante es responsivo, permite agregar imágenes, vídeo, y HTML. Las animaciones de transición que utiliza son con CSS  y pueden ser de forma horizontal, vertical o con efectos de desvanecimiento. En lo personal me gusto mucho por lo fácil que es utilizarlo.

Características

Responsivo, se adapta a cualquier dispositivo

  • Soporta  slides horizontal, vertical y desvanecimientos.
  • El contenido del slider puede ser: imágenes, video o HTML.
  • Soporta touch y swipe.
  • Para las animcaiones utiliza CSS (aceleración de hardware nativo!) .
  • Completa Callback API y métodos públicos.
  • Muy liviano, modificable y fácil de implementar.
  • Navegadores soportados:Firefox, Chrome, Safari, iOS, Android, IE7+
  • Incluyer muchas opciones de configuración

Como se utiliza

Con tan solo tres pasos ya lo tenemos instalado y trabajando

1. Se carga la libreria jQuery y los archivos javascript y css de bxSlider

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2.  Para crear el slider se utiliza una lista (ul) con la clase bxslider, cada elemento del slider es una etiqueta (li) la cual puede contener imagenes, video o HTML

<ul class="bxslider">
   <li><img src="/images/pic1.jpg" /></li>
   <li><img src="/images/pic2.jpg" /></li>
   <li><img src="/images/pic3.jpg" /></li>
   <li><img src="/images/pic4.jpg" /></li>
</ul>

3. Se llama a bxSlider(), esto se hace dentro de $document.ready().

$(document).ready(function(){
 $('.bxslider').bxSlider();
});

Si se desea modificar algunas opciones del slider se puede hacer de la siguiente forma,

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'vertical',
        speed:900
    });
});