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
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.