BxSlider – jQuery Content Slider
BxSlider es un jQuery Content Slider totalmente sensible adaptándose a cualquier tipo de dispositivo, ya sea pc, portátil, móvil, table, ipad, etc. The responsive jQuery Content Slider.
Características:
- Permite transición vertical y horizontal
- Las diapositivas pueden contener imágenes, videos o contenido HTML
- Advanced touch / golpe soporte incorporado
- Utiliza transiciones CSS para animación de diapositivas (aceleración de hardware nativo!)
- Tamaño de archivo pequeño, completamente temático, simple de implementar
- Funciona bien en Firefox, Chrome, Safari, iOS, Android, IE7 +
- Un montón de opciones de configuración
- 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
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" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, autoControls: true }); }); </script>
Ahora en el <body> deberá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>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
hola; ingrese el código en mi html, pero no muestra las imágenes, el slice funciona pero esta vacio
gracias
Hola, parece ser que en tu hosting no están las imágenes alojadas. En este caso, puedes descargar las imágenes también y ubicarlas en la ruta correcta o poner la ruta completa alojada en jose-aguilar.com
José, muchas gracias por tus aportes.
He implementado el bxslider en un sitio y me funciona bastante bien, salvo cuando se ve en un dispositivo móvil. Básicamenete el problema aparece cuando el tamaño del dispositivo se va reduciendo, es ahí cuando aparece el problema: el alto del control no se reduce aunque las imágenes si, entonces queda un espacio en blanco debajo de las imágenes lo que genera un espacio muy grande entre la imagen y el contenido.
Agradecería cualquier comentario que pueda ayudarme.
Gracias
Hola,
El ejemplo en funcionamiento se ve bastante bien en dispositivos móviles. Revisa que no hayas incluido correctamente la hoja de estilos de bxslider.
Saludos
Hola amigo José deseo agragar un link dentro del caption del slider me puedes dar una idea ya que los links los desactiva automaticamente al hacer click en el hipervinculo que dirige a otra seccion de mi pagina.
Gracias de antemano
Hola,
Gracias por tu mensaje.
Quizás debes ponerte en contacto con el desarrollador de este plugin. El tendrá una respuesta más acertada. -> https://bxslider.com/
Saludos
Hola tengo una web donde uso bxslider pero las imageens se pegan como un salto extraño, mejor dicho la transicion de este slider es feisima te dejo link para que la veas
goramedios.com/clientes/telcomar ahi en el index esta lo que quiero cambiar ( dejar una transicion mas suave no con ese salto extraño.
Hola,
Yo creo que tan solo tienes que quitar una linea de la llamada al plugin bxSlider:
easing: ‘easeOutElastic’,
Saludos
Hola Jose, he aplicado un slider horizontal en una sección especifica de mi pagina web, al levantar el seccion.html, lo hace perfectamente, el problema surge cuando me muevo a otra seccion1.html y regreso luego al slider, este me muestra las imágenes apiladas en forma vertical y no me funciona el slider. Me podrías decir cual seria mi problema o error? Muchas Gracias, muy buena tu pagina. Saludos.
Hola, así sin ver el problema en directo solo puede decirte que pudiera ser que en el seccion1.html te falte la llamada al plugin, la inclusión del script o algún archivo que sea necesario para bxSlider. Esto lo podrías revisar fácilmente con la herramienta firebug. Imprescindible para los desarrolladores webs.
¿Cómo estás?
Estoy armando un sitio en wordpress, y llamo a los contenidos de cada post (single.php) con magnific-popup vía AJAX. Dentro del Post tengo un slider realizado con bxslider.
El problema es que cuando lo llamo vía ajax el slider no funciona. Solo cuando desactivo el magnific-popup empieza a funcionar.
Tenés alguna idea de como activar este plugin trallendolo desde ajax? porque mi idea es que aparezca dentro de una caja modal, sin que el navegante tenga que salir a otra página.
Un saludo
Jorge
Hola,
Nunca he tenido que hacer algo similar pero se me ocurre que lo puedes solucionar cambiando el click:
$(‘#enlace’).on(‘click’, function() {
…
});
Saludos
Hola,
Tengo un problema al utilizar el bxslider.
Llamo a las funciones en el head de mi página.
El script lo introduzco en el main y luego enlazo las imagenes también en el main donde quiero que aparezca.
La imágenes aparecen rotas, es decir no se muestran a pesar de tenerlas en la carpeta imágenes y indicarle la ruta completa al bxslider.
También me aparecen en bullets una debajo de otra.
🙂 opale.. si señor ahora si se modifico el alto :)..
muchisimas gracias.. tendre encuenta esta pagina de las opciones
si no es mucha molestia cualquier otra inquietud te aviso por aqui mismo..
otra vez gracias..
Hola.
Quiero aplicar en mi web un slider horizontal..
pero necesito modificar el tamaño, mas que todo la altura masomenos que quede de unos 800px de alto..
pero no e logrado.
podrias echarme una mano please.
estare al pendiente.. o tambien puedes comunicarte a mi email: lizarazuuu@hotmail.com
HOla,
En las opciones del plugin: http://bxslider.com/options
puedes ver que existe un parámetro:
adaptiveHeight
Dynamically adjust slider height based on each slide’s height
Seguramente jugando con el y poniendo las imágenes al tamaño deseado consigues lo deseado.
Hola.
Quiero aplicar en mi web un slider horizontal..
pero necesito modificar el tamaño, mas que todo la altura masomenos que quede de unos 800px de alto..
pero no e logrado.
podrias echarme una mano please.
estare al pendiente.. o tambien puedes comunicarte a mi email: lizarazuuu@hotmail.com
adaptiveHeight
Dynamically adjust slider height based on each slide’s height