Liviano Slide de contenido Html, fácil de implementar.
Liviano Slide de contenido Html, fácil de implementar.
PeloSlideLi es un Plugin para jQuery, lanzado por primera vez el 10 de Enero del 2010. Nos permite transformar una lista en un Slide, con cualquier contenido HTML. Totalmente personalizable vía CSS logrando una integración muy simple y rápida a nuestros proyectos.
El objetivo principal de este plugin, es que sea rápido y fácil de implementar, con pocos pasos en la configuracion la instalación se hace bastante intuitiva.
Antes que nada, deberás subir todos los archivos para luego acceder a ellos.
Al ser un Plugin basado en jQuery, es obvio que debes incluir la librería en tu sitio.
Puedes incluirlo desde el repositorio de Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Luego, incluyes el plugin PeloSlideLi.
<script type="text/javascript" src="javascript/peloslideli.v1.0.1.js"></script>
* Nota: Si quieres ahorrar ancho de banda en tu servidor, puedes agregar la versión comprimida del plugin: peloslideli.v1.0.1.min.js.
Luego, incluyes la hoja de estilos.
<link type="text/css" rel="stylesheet" href="css/peloslidelistyles.v1.0.1.css" />
* Nota: Recuerda que es importante que indiques el ancho y el alto del wrapper que contendrá la lista.
#slideLi
{
width: 475px; /* Importante! */
height: 175px; /* Importante! */
}
Una vez realizado la instalación de los archivos en nuestro servidor y la configuración de nuestra hoja de estilos, agregamos el código HTML.
<div id="slideli"> <!-- wrapper --> <ul> <li>(Primer Slide)</li> <li>(Segundo Slide)</li> </ul> <div class="botonera"> <!-- botones de reproducción --> <a href="index.php" class="prevBtn"></a> <a href="index.php" class="pauseBtn"></a> <a href="index.php" class="playBtn"></a> <a href="index.php" class="nextBtn"></a> </div> </div>
Y luego nos resta nada más declarar la función.
<script type="text/javascript">
$("#slideLi").PeloSlideLi({
pause: 10000,
autoStart: true,
direction: "horizontal"
});
</script>
Los siguientes parámetros opcionales están habilitados para crear la clase.
prevId: Nombre de la clase para la función Anterior.
nextId: Nombre de la clase para la función Siguiente.
pauseId: Nombre de la clase para la función Pausa.
playId: Nombre de la clase para la función Play.
speed: (milisegundos) Velocidad de transición del Slide.
autoStart: (boolean) Iniciar o no el Slide al cargar la página.
pause: (milisegundos) Retardo entre un cuadro y otro.
direction: ("vertical" / "horizontal") Dirección del Slide.
effect: ("fade" / "slide") Efecto del Slide.
* Auto Start.
* Fade Effect.
$(document).ready(function() {
$(".slide1").PeloSlideLi({
pause: 5000,
speed: 500,
autoStart: true,
direction: "horizontal",
effect: "fade"
});
});
* Slide Vertical.
* AutoStart False.
$(document).ready(function() {
$(".slide2").PeloSlideLi({
speed: 100,
autoStart: false,
direction: "vertical"
});
});
El script es publicado bajo la licencia MIT.
jQuery.PeloSlidePack.js.rar | 357 Kb (descargado 200 veces)
jQuery.PeloSlideLi.js 1.0.1 - Abril 3, 2010
* Se agrega el efecto Fade.
jQuery.PeloSlideLi.js 1.0.0 - Enero 10, 2010
* Lanzamiento del Script.
Producto desarrollado por Cabello H. Guillermo, para KbZone Desarrollos web.
Íconos, diseños del Isologo, y colaboraciones varias de Eduardo Sada.
Si tienes problemas para implementarlo, alguna duda o alguna idea que quieras compartir sobre el Plugin, por favor deja tu comentario a continuación. Muchas gracias!
