Complemento AnythingSlider jQuery | Programar Plus

Justo lo que el mundo necesita, otro control deslizante de jQuery. BOSTEZO. Lo sé, mira este, tiene muchas características interesantes.

Aquí, en CSS-Tricks, he creado varios controles deslizantes diferentes. Tres, de hecho. Un control deslizante de “contenido destacado”, un “control deslizante de inicio / parada” y “cuadros móviles”. Cada uno de ellos tenía una característica interesante que necesitaba construir en ese momento. Todos fueron bien recibidos, pero como es el caso de estas cosas, la gente quiere que hagan X, Y y Z además de lo que ya hicieron.

Este nuevo AnythingSlider es un intento de reunir la funcionalidad de todos esos controles deslizantes anteriores y agregando nuevas funciones. En otras palabras, para crear un control deslizante realmente “completo” que podría ser muy útil. Esta es la primera vez (en CSS-Tricks) que uno de estos controles deslizantes también es un complemento real, lo que debería facilitar su implementación y personalización.

Ver demostración Descargar archivos

La página de demostración tiene la versión actual, el uso completo y el registro de cambios actualizado.

Características

• Las diapositivas son contenido HTML (puede ser cualquier cosa)
• Flechas de diapositiva siguiente / diapositiva anterior
• Las pestañas de navegación se crean y agregan dinámicamente (cualquier cantidad de diapositivas)
• Función personalizada opcional para formatear el texto de navegación
• Reproducción automática (función opcional, puede comenzar a reproducirse o detenerse)
• Cada diapositiva tiene un hashtag (se puede vincular directamente a diapositivas específicas)
• Deslizamiento infinito / continuo (siempre se desliza en la dirección en la que va, incluso en la “última” diapositiva)
• Se permiten varios controles deslizantes por página (los hashtags solo funcionan en el primero)
• Pausa la reproducción automática al pasar el mouse (opción)
• Enlace a diapositivas específicas desde enlaces de texto estático
• ….y…. … Espéralo…. ¡más!

Personalización

Agregar / eliminar diapositivas

Simplemente agregue o elimine más

$("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});