bxSlider: jQuery Slider de contenido responsivo

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

9 comentarios en “bxSlider: jQuery Slider de contenido responsivo”

  1. Ernest dice:

    Y se quiero poner mis propias imágenes cómo le hago

    1. denker dice:

      solo tienes que poner la ruta de tus imagenes en el atributo src de la etiqueta img

  2. Andres dice:

    es compatible con jquery mobile

  3. Angel dice:

    Lo estoy usando como banner principal solo tengo un pequeño inconveniente al usarlo no se ve bien se ve parte de la imagen que sigue, que se puede hacer

    1. sun2012 dice:

      Checa tu CSS puede ser el problema, saludos.

  4. Jose Marino dice:

    buenas quería saber xq si pongo 20 imagenes me esta mostrando menos?

    Saludos

    1. sun2012 dice:

      Checa en la documentacion o revisa tal vez estan muy pesadas o checa q si estan bien la ruta, si estas en un server checa que el nombre no tenga espacios. Es muy dificil responderte desde aqui. Saludos.

  5. hola, si yo quiero jalar la ruta de toda una carpeta y que al cambia las imagnes de dicha carpeta se muestren las imagnes ya se el cmabio de 10 o 20 se puede?

Deja un comentario