SummArg | Cursos y recursos para webmasters

22/08/2013

bxSlider, el slider responsivo de contenidos definitivo

Pocos sliders cumplen tan bien con el requisito de ser responsivo y soportar todo tipo de contenidos HTML como lo hace bxSlider, lo que lo hace perfecto para una gran variedad de tipos de layout.

bxslider

  • Soporta modo horizontal, vertical y modo fade.
  • Las slides pueden contener imágenes, video o HTML.
  • Soporta touch y swipe.
  • Utiliza transiciones CSS para las transiciones.
  • Callback API y métodos públicos.
  • Muy liviano y soporta themes.
  • Muchas opciones de configuración :).

La instalación es muy simple, en primera instancia debemos colocar las llamadas a los archivos correspondientes entre etiquetas <head>:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Luego creamos el marcado HTML, las slides deben estar dentro de elementos <li> y pueden contener imágenes, texto, HTML, etc.

<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>

Finalmente inicializamos el plugin.

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

Descarga | Ejemplos | Opciones

 

Dejar un comentario