Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

AnyThing Slider... jquery plugin

Escrito por: Martín el 18-08-2009 06:21:56

AnyThing Slider... jquery plugin

Como bien dice su autor, sí, es otro slider para jquery. Pero éste tiene una particularidad y es que une un montón de características  de otros.

A mi, personalmente, me resulta más que interesante y no creo que pase mucho tiempo hasta que lo pruebe. Mucho no se puede contar, más de lo que publica Chris Coyer en CSS-TRICKS.

Características:
- El contenido a mostrar es HTML puro, por lo que puede ser cualquier cosa.
- Flechas de Siguiente/Anterior.
- Las pestañas de navegación (números) son agregadas y construidas dinámicamente.
- Auto Play -puede comenzar automáticamente o iniciarlo desde un botón-.
- Cada slide puede enlazar a su contenido específico.
- Loop continuo, siempre continúa rotando slides.
- Múltiples instancias del slider por página.
- Se puede pausar al hacer un rollover.
- Incluso el texto de cada slide puede enlazarse con su contenido.

Implementación:
La implementación es muy fácil, mira el código 1 para el javascript necesario.

Slides:
Cada slide debe ir dentro de un <li> que a su vez está dentro de un div llamado ´wrapper´. Y para ajustar el tamaño a tus necesidades, debes retocar la hoja CSS incluida.

Demo:
Como para muestra basta un botón, mejor verlo que leerlo, así que pásate por la demo (y de paso, ahí tienes el link para descargarlo).

Bookmark and Share

Código JAVASCRIPT

$('.anythingSlider').anythingSlider({
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});

 

 

Otros recursos:

Yo digo

Ver todos los Comentarios

¿Sabías qué?

Ver todos los Recursos

facebookBúscame en Facebook

twitterSígueme en Twitter

© 2010 Martin Iglesias - Todos los derechos reservados

Creative Commons License Mejor con Firefox 3 Valid XHTML 1.0 Transitional ¡CSS Válido! Suscribete a mi RSS Directorio de Desarrollo de páginas web Add to Technorati Favorites