Sigueme por RSS! RSS

Easy Slider

Easy Slider es otro de estos plug-in interesantes para JQuery, que te permiten ahorrar mucho trabajo a la hora de armar tu sitio Web. Fue desarrollado por la gente de CSSGlobe,veamos algunos ejemplos:


Uso - al igual que en otros plugins, de la siguiente manera:

1.- incluimos las librerías y el CSS (entre etiquetas head):
<!-- incluimos el JQuery -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- incluimos el plugin -->
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<!-- incluimos el CSS -->
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

2.- iniciamos el plugin e indicamos las opciones (entre etiquetas head):
<script type="text/javascript">
$(document).ready(function(){   
   $("#slider").easySlider({
      // aqui las opciones pra el slider  
   });
});   
</script>

3.- armamos la galería (entre etiquetas body):
<div id="slider">
  <ul>               
    <li><a href="RUTA_hacia_la/imagen1.jpg"><img src="RUTA/imagenes/imagen1.jpg" /></a></li>
    <li><a href="RUTA_hacia_la/imagen2.jpg"><img src="RUTA/imagenes/imagen2.jpg" /></a></li>
    <li><a href="RUTA_hacia_la/imagen3.jpg"><img src="RUTA/imagenes/imagen3.jpg" /></a></li>
    <li><a href="RUTA_hacia_la/imagen4.jpg"><img src="RUTA/imagenes/imagen4.jpg" /></a></li>
  </ul>
</div>


Opciones principales:
// id del boton prev (anterior)
prevId: 'prevBtn',

// texto para el boton prev (anterior)
prevText: 'Previous',

// id del boton next (siguiente)
nextId: 'nextBtn',	

// texto del boton next (siguiente)
nextText: 'Next',

// indica que el slider debe cambiar automaticamente
auto: true 

// si se establece a false, evita la interaccion del ususario
// puede trabajar con "auto: true"
controlsShow: false,

// velocidad de la animacion en milisegundos
speed: 800,

// determina en milisegundos, el tiempo que tardara
// cada imagen en cambiar cuando esta a "true" la opcion "auto"
pause: 2000,

// permite mostrar las imágenes una tras otra
// si llega a la ultima, regresara a la primera 
continuous: false, 

// inicia que debe agregarse la paginación
// en lugar de los botones anterior/siguiente
numeric: true,


Referencia:
cssglobe.com

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.