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