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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
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();
});
