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