Tiny Circleslider para jQuery

Tiny Circleslider es un pequeño plugin para jQuery que genera un carrusel de imágenes circular.

No es nada complicado de utilizar tal como muestran en el ejemplo que podemos descargar pero, a la hora de personalizarlo, hay que emplear mucha aritmética. Todos esos detalles pueden verse en la página del autor así que me limito a mostrar lo elemental.

Obviamente necesitamos tener la librería agregada en el head de nuestra plantilla:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Y luego, el script del plugin que podemos agregar, copiando el contenido del archivo jquery.tinycircleslider.min.js y pegándolo de este modo:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

Nos faltaría el CSS que ponemos debajo y que requiere el uso de tres imágenes que podemos descargar y alojar en el mismo Blogger: bg-rotatescroll.png, bg-rotatescroll2.png, bg-thumb.png:

<style>
  #rotatescroll { /* es el rectángulo contenedor */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* es el rectángulo que contiene las imágenes */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* es la lista con las imágenes */
    left: 0;
    list-style: none; 
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* cada item de la lista */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* la imagen con el círculo se superpone a la lista */
    background: transparent url(URL_bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* el círculo rojo que nos permite navegar */
    background:transparent url(URL_bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* los puntos que indican ca posición de cada imagen */
    background: transparent url(URL_bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* permanecen ocultos por defecto */
    display: none;
  }
</style>

Ahora, el HTML que colocamos donde vayamos a mostrar el carrusel donde, las imágenes pueden ser enlaces o no:

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="URL:imagen1" /></li>
      <li><img src="URL:imagen2" /></li>
      <li><img src="URL:imagen3" /></li>
      <li><img src="URL:imagen4" /></li>
      <li><img src="URL:imagen5" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

Eso es todo, y bastaría activar la función agregando algo así debajo del HTML:

<script type="text/javascript">
  $(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
</script>

Algunas opciones extras permiten definir si funcionará como un slideshow automático:

$('#rotatescroll').tinycircleslider({ interval: true });

y hay otras opciones que se agregan, separándolas por comas:

snaptodots true si se mostrarán los puntos cuando se arrastran (por defecto es false)
hidedots false si no queremos que se muestren los puntos internos (por defecto es true)
intervaltim es el tiempo entre slides (por defecto 3500)
radius define el tamaño del círculo (por defecto es 140)