SummArg | Cursos y recursos para webmasters

25/08/2011

FlexSlider, plugin para sliders jQuery ultraliviano

FlexSlider es un plugin para jQuery que pesa sólo 4kb en su versión minified. Toma las imágenes desde listas desordenadas y acepta descripciones y links. Es muy simple de utilizar. Tras la descarga del plugin, insertamos entre etiquetas <head>:

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

Luego insertamos las imágenes dentro de una lista:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

Y finalmente indicamos los parámetros y la clase a nuestro script. Estas líneas pueden ir entre etiquetas <head> pero debajo de los links arriba mencionados:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Entre sus opciones tenemos varios parámetros para el manejo de la animación (tipo de animación, controles, autoplay, etc) y el tamaño.

Descarga | Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: FlexSlider es un plugin para jQuery que pesa sólo 4kb en su versión minified. Toma las imágenes desde listas desordenadas y acepta descripciones y links. Es muy simple de utilizar. Tras la descarga del plugin, insertamos entr…..

Dejar un comentario