SummArg | Cursos y recursos para webmasters

28/11/2010

Slides: pequeño y elegante plugin jQuery para lograr un Slider

Slides se presenta como un plugin jQuery interesante para generar un slideshow compuesto de imagenes que rotan con una animación suave. Si bien no posee gran cantidad de opciones para personalizar el slider, las mismas alcanzan para cumplir con lo indispensable a la hora de implementarlo en nuestro website y se configura tan simple como otros.

$(function(){
  $("#slides").slides({
    preload: true,
    preloadImage: '/img/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true
  });
});

Para instalarlo en nuestro proyecto debemos descargar el paquete desde este link. Entre etiquetas <head> de nuestro proyecto colocaremos el siguiente código cuidando las rutas a los archivos javascript, css y de imagen.

<script src="js/jquery-1.4.4.min.js"></script>
 <script src="js/slides.min.jquery.js"></script>
 <script>
 $(function(){
 $('#slides').slides({
 preload: true,
 preloadImage: 'img/loading.gif',
 play: 5000,
 pause: 2500,
 hoverPause: true
 });
 });
 </script>
 <link rel="stylesheet" href="css/global.css">

Entre etiquetas <body>, en donde colocaremos el slider, insertamos:

<div id="slides">
 <div class="slides_container">
 <img src="slide-1.jpg" width="570" height="270" alt="Slide 1">
<img src="slide-2.jpg" width="570" height="270" alt="Slide 2">
<img src="slide-3.jpg" width="570" height="270" alt="Slide 3">
 </div>
 <a href="#"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 <a href="#"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
 </div>

El script identificará las imagenes dentro del div y las colocará como es necesario. En el caso de que se desee colocar un link en cada imagen bastará con colocar el atributo href del siguiente modo:

<a href="mi-linl.html"><img src="slide-1.jpg" width="570" height="270" alt="Slide 1"></a>

Muy simple, no? Visto en Kabytes

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Slides se presenta como un plugin jQuery interesante para generar un slideshow compuesto de imagenes que rotan con una animación suave. Si bien no posee gran cantidad de opciones para personalizar el slider, las mismas alcanz…..

  2. jonathan

    tengo el archivo de slide.js pero el jquaryjs de donde lo puedo sacar gracias

  3. Nekko

    Jonathan, el archivo jQuery.js podés obtenerlo en http://blog.jquery.com/2011/02/24/jquery-151-released/ o usarlo directamente incluyendo la siguiente línea en tu theme (fijate que puse espacios extra dentro del tag script):

    < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">< /script>

    Mas info en: http://docs.jquery.com/Downloading_jQuery

  4. Hola.

    Necesito modificar el paginador para que en lugar de mostrar los circulitos verdes, mostrar un testo en cada botoncito.

    Ejpl:

    page1 page2 page3 page4 page5 page6 page7

    Alguien me puede ayudar?

    Muchas gracias.
    Un saludo :)

  5. En este ejemplo podéis ver mas claramente a que me refiero.

    La web en la que lo quiero implementar es esta: f21.us

    y esta es la web donde está como lo quiero poner, ya la coneceréis es mediafire punto com

    Gracias
    Un saludo :)

Dejar un comentario