Crea una presentación de imágenes con AnythingSlider jQuery Plugin

AnythingSlider jQuery Plugin es un recurso para crear una presentación de imágenes muy dinámica, elegante y con toda la potencia y facilidad que brinda la biblioteca jQuery.

Principales características:

• Permite crear la presentación (slide) con cualquier tipo de contenido HTML.
• Posee barra de navegación con controles para siguiente/anterior.
• Tabs dinámicas para un rápido acceso a una determinada imagen
• Funciones opcionales para formato de la barra de navegación.
• Función de reproducción automática.
• Enlaces a imágenes específicas por medio de enlaces entre algunas otras.

Implementación

Enlazamos las hojas de estilo CSS:

<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />

Enlazamos los archivos JS incluídos los componentes jQuery:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>

<script src="js/jquery.anythingslider.js" 
type="text/javascript" charset="utf-8"></script>

Inicializamos el script, en este caso con las opciones definidas a sus valores por defecto:

<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
startText: "Go",
stopText: "Stop",
navigationFormatter: formatText
});
$("#slide-jump").click(function(e){
$('.anythingSlider').anythingSlider(6);
e.preventDefault();
});
});
</script>

AnythingSlider jQuery Plugin

Web: css-tricks.com/anythingslider-jquery-plugin

Vía: www.adictosalared.com