Skitter Slideshow
Skitter Slideshow es una presentación flexible de contenido con muchas opciones de personalización y unos efectos increibles.
Para disponer de este slider deberás añadir en el <head> de vuestra página los estilos y scripts necesarios que están incluidos en el paquete de descarga que podrás obtener en la página oficial del slideshow.
<link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box_skitter_large').skitter();
});
</script>
Como vemos el slider se alimenta del script jquery.easing admás de la librería jQuery.
El plugin utiliza las listas para almacenar en el HTML los elementos, por tanto, en el <body> deberemos añadir algo como lo siguiente:
<div class="border_box"> <div class="box_skitter box_skitter_large"> <ul> <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li> <li><a href="#cubeRandom"><img src="images/002.jpg" class="cube" /></a><div class="label_text"><p>cubeRandom</p></div></li> <li><a href="#block"><img src="images/003.jpg" class="cube" /></a><div class="label_text"><p>block</p></div></li> <li><a href="#cubeStop"><img src="images/004.jpg" class="cube" /></a><div class="label_text"><p>cubeStop</p></div></li> <li><a href="#cubeHide"><img src="images/005.jpg" class="cube" /></a><div class="label_text"><p>cubeHide</p></div></li> <li><a href="#cubeSize"><img src="images/006.jpg" class="cube" /></a><div class="label_text"><p>cubeSize</p></div></li> <li><a href="#horizontal"><img src="images/007.jpg" class="cube" /></a><div class="label_text"><p>horizontal</p></div></li> <li><a href="#showBars"><img src="images/008.jpg" class="cube" /></a><div class="label_text"><p>showBars</p></div></li> <li><a href="#showBarsRandom"><img src="images/009.jpg" class="cube" /></a><div class="label_text"><p>showBarsRandom</p></div></li> <li><a href="#tube"><img src="images/010.jpg" class="cube" /></a><div class="label_text"><p>tube</p></div></li> <li><a href="#fade"><img src="images/011.jpg" class="cube" /></a><div class="label_text"><p>fade</p></div></li> <li><a href="#fadeFour"><img src="images/012.jpg" class="cube" /></a><div class="label_text"><p>fadeFour</p></div></li> <li><a href="#paralell"><img src="images/013.jpg" class="cube" /></a><div class="label_text"><p>paralell</p></div></li> <li><a href="#blind"><img src="images/014.jpg" class="cube" /></a><div class="label_text"><p>blind</p></div></li> <li><a href="#blindHeight"><img src="images/015.jpg" class="cube" /></a><div class="label_text"><p>blindHeight</p></div></li> <li><a href="#blindWidth"><img src="images/016.jpg" class="cube" /></a><div class="label_text"><p>blindWidth</p></div></li> <li><a href="#directionTop"><img src="images/017.jpg" class="cube" /></a><div class="label_text"><p>directionTop</p></div></li> <li><a href="#directionBottom"><img src="images/018.jpg" class="cube" /></a><div class="label_text"><p>directionBottom</p></div></li> <li><a href="#directionRight"><img src="images/019.jpg" class="cube" /></a><div class="label_text"><p>directionRight</p></div></li> <li><a href="#directionLeft"><img src="images/020.jpg" class="cube" /></a><div class="label_text"><p>directionLeft</p></div></li> <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cube" /></a><div class="label_text"><p>cubeStopRandom</p></div></li> <li><a href="#cubeSpread"><img src="images/022.jpg" class="cube" /></a><div class="label_text"><p>cubeSpread</p></div></li> </ul> </div> </div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
11 respuestas a “Skitter Slideshow”
Deja una respuesta
41 artículos que te podrían interesar
Ver más sobre
Saludos, estoy intentando con skitter aumentar una imagen (la imagen tiene dos enlaces diferentes), pero no acepta, por favor si alguien sabe como incluirlo o hizo algo similar.
Gracias
Saludos, gracias por la ayuda, pero tengo una duda, en una pagina donde ya existe un slider (por ser plantilla) quisiera colocarle este skitter en la parte inferior pero no me aparece, solo llega a salir delineado el sitio donde deberia de salir ya funcionando. He notado que ambos sliders usan 2 o 3 librerias en comun, podria ser esa la falla?
Hola! ¿Habría alguna posibilidad de incorporar un enlace dentro de cada imagen? Quiero decir si podría enlazar cada imagen del slider con una sección de mi web. La verdad es que llevo un rato dándole vueltas pero no he podido solucionarlo.
Gracias!
Lo podéis preguntar en la página oficial a ver si se puede –> http://www.skitter-slider.net/comments
Hola!! ya implementé el slider pero quisiera saber si se puede agregar texto a las imagenes pero en una posición determinada y no en la parte de texto inferior que tiene por default. Gracias
HOla, si tu puedes añadir un contenedor dentro del li en posición absoluta y que los li tengan posición relativa y luego ya jugando con top, bottom, right o left lo pones en la posición deseada.
Hola!! el slider anda perfecto pero en mozilla se me ve sobre el lado derecho de mi pantalla, por la mitad. En lugar de centrado. Que estoy haciendo mal?? Gracias
No se como comenzar, donde coloco los códigos HTML, gracias.
Hola,
Los html dentro del
Saludos
Hola José, quisiera saber si me podés ayudar a introducir el código de skitter en mi web, no se de programación HTML hive mi web con http://www.000webhost.com siguiendo tutoriales e investigando el tema de a poco, muchas gracias por tu ayuda!
Que problema tienes?