BxSlider – jQuery Content Slider

Comment

Cliente (HTML, Javascript, CSS) Programación

BxSlider es un plugin jQuery, que permite insertar contenido desplazable, adaptándose a cualquier tipo de dispositivo, ya sea pc, portátil, móvil, tablet, ipad, etc.

Características:

  • Permite transición vertical y horizontal
  • Las diapositivas pueden contener imágenes, videos o contenido HTML
  • Soporta manejo touch

  • Utiliza transiciones CSS para animación de diapositivas
  • Tamaño de archivo pequeño, completamente temático, simple de implementar
  • Funciona bien en Firefox, Chrome, Safari, iOS, Android, IE7 +
  • Se ajusta al tamaño del contenedor padre
  • Permite añadir captions mediante el atributo title de la imagen
  • Permite adaptative height, mostrar imágenes o contenido de distinto alto ajustando los controles
  • Se puede implementar un carousel de imágenes o contenido HTML
  • Además de bullets permite añadir thumbnails images como paginador
  • Un montón de opciones de configuración

Para añadir a tu página Web necesitarás descargarte el script de la página oficial de bxslider y añadir en el <head> de tu página la librería jQuery, el plugin + su llamada y los estilos de bxslider, como por ejemplo:

<link href="jquery.bxslider.css" rel="stylesheet" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.8.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.bxslider.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24(document).ready(function()%7B%0A%C2%A0%20%C2%A0%C2%A0%20%C2%A0%24('.bxslider').bxSlider(%7B%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%20auto%3A%20true%2C%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%20autoControls%3A%20true%0A%C2%A0%C2%A0%20%C2%A0%7D)%3B%0A%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Ahora en eldeberás añadir allí donde quieras el contenido HTML:

<ul class="bxslider">
<li><img src="slides/1.jpg" title="Caption 1" /></li>
<li><img src="slides/2.jpg" title="Caption 2" /></li>
<li><img src="slides/3.jpg" title="Caption 3" /></li>
<li><img src="slides/4.jpg" title="Caption 4" /></li>
</ul>

Por último, llama al bxslider. Nótese que la llamada debe realizarse dentro del $(document).ready(), o el plugin no funcionará!

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

Deja un comentario