Hay muchas formas de crear un sldier sencillo y que «pese» poco para tu sitio web, uno de los mas sencillo y faciles de usar es el bxSlider, en su web http://bxslider.com podemos encontrar todo lo necesario para que funcione nuestro slider, si bien esta en ingles, en esta entrada nos disponemos a explicaros como utilizar este sencillo slider.
Lo primero que tenemos que hacer es descargarnos los archivos necesarios del botón download, si bien la descarga una vez descomprimida aparecen diferentes archivos que no vamos a necesitar ,solo necesitaremos los archivo jquery.bxslider.min.js, jquery.bxslider.css y en plugins el jquery.easing.1.3.js dependiendo de la animación que elijamos, si no queremos preocuparnos por los archivos necesarios podéis descargaros de aquí los que necesitamos únicamente: jquery bxslider.
Una vez descomprimido los archivos dentro de nuestro sitio web lo primero que vamos ha hacer es crear una lista desordenada en la que introduciremos nuestras imágenes (es aconsejable que nuestra lista desordena este dentro de un div o componente similar), a esta lista le agregamos una clase (bxslider, galerias, imagenes, etc..) cuyo nombre usaremos posteriormente para activar el slider. Dentro de las imágenes agregaremos la propiedad title para poner un etiqueta que aparezca en la parte inferior de las imágenes. Quedando algo similar a:
<div class="galeria"> <ul class="bxslider"> <li><img src="imagenes/coche1.jpg" width="980" height="400" alt="" title="Coche1"/></li> <li><img src="imagenes/coche2.jpg" width="980" height="400" alt="" title="Coche2"/></li> <li><img src="imagenes/coche3.jpg" width="980" height="400" alt="" title="Coche3"/></li> </ul> </div>
Después añadiremos la hoja de estilos justo por encima del <head> ademas de los estilos necesarios para adaptar el slider:
<link href="jquery.bxslider.css" rel="stylesheet" />
<style type="text/css">
.galeria{
width:980px;
}
.bxslider{
margin:0px;
padding:0px;
list-style-type:none;
}
</style>
A continuación añadimos los ficheros js necesarios por encima del </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jquery.bxslider.min.js"></script>
Y por último nos quedaría inicializar el bxslider con una orden como la siguiente que pondríamos debajo de lo anterior:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
Con esto lo tendríamos funcionando, si bien nosotros podemos personalizarlo un poquito, como por ejemplo para que se inicie de forma automatica y salgan los controles del play y pause, entonces cambiariamos el condigo anterior por:
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
.Si queremos que nos muestre los «title» de las imágenes agregamos caption:true, si queremos cambiar el modo en el que se mezclan las imagenes añadiriamos mode: y los valores posibles son ‘fade‘, ‘horizontal‘, ‘vertical’, tambien tenemos la opción de ponerle un efecto «rebote» a las imagenes con easing: ‘easeOutElastic’,, pero hay que añadir ademas <script type=»text/javascript» src=»plugins/jquery.easing.1.3.js»></script> por encima, hay muchas otras posibilidades que podemos encontrar en su pagina.
como le cambio la velocidad de transición?
En la web http://bxslider.com tienes una sección con la documentacion (dentro de options) para modificar mas aspectos, en concreto tendrías que cambiar parámetro speed añadiendo algo dentro de la inicialización del slider como
speed: 1000,
de forma que quede algo como:
$(‘.bxslider’).bxSlider({
auto: true,
speed: 1000,
autoControls: true
});