Cómo instalar un Slider con efectos multiples

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Coin Slider: Un slider de imágenes con múltiples efectos

9 de marzo de 2011 | Publicado por El Potro |   

Coin Slider es un slideshow de fotos hecho con jQuery que a diferencia de otros puede mostrar diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo a las imágenes.

Estas animaciones podrán hacer una mejor presentación de las imágenes que deseas mostrar y que bien podrán servir para enlazarlas a tus entradas que deseas destacar.

El slider además de tener distintas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los enlaces Anterior y Siguiente, o con los botones de abajo.

Para agregarlo en tu blog primero descarga este archivo, descomprímelo y sube el archivo descomprimido a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo js' type='text/javascript'/>
< script>$(document).ready(function() {
$(&#39;#CoinSlider&#39;).coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
< /script>

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega estos estilos:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

El siguiente paso es agregar la estructura del slider, para ello entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:

<center>
< div id="CoinSlider">

< a href="URL del enlace">
< img src="URL de la imagen"/>
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

< /div></center>

Cambia la URL del enlace y la URL de la imagen donde se indica. De igual forma puedes agregar una pequeña descripción a las fotos si así lo deseas, sino sólo elimina todo esto:

<span>Descripción de la imagen.</span>

Si quieres añadir más imágenes sólo agrega antes del último </div> otro fragmento como este:

<a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

En el primer código hay unas opciones que podemos modificar:
delay: 3000, es el tiempo en milisegundos que durará cada imagen.
hoverPause: false, es el control de pausa que aparecerá al pasar el cursor sobre la imagen, con true se activa.
navigation: true, son los enlaces Anterior y Siguiente que aparecen al pasar el cursor, con false se desactivan.
width: 565, es el ancho del contendor.
height: 290, es el alto del contendor.

Si cambias el ancho del contendor también deberás cambiar el ancho en color verde de los estilos (width: 545px) que es el ancho del área de la descripción de las imágenes.
Si deseas cambiar los textos Anterior y Siguiente necesitarás editar el archivo coin-slider.min.js, buscar esas palabras y cambiarlas por otras.

Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.

Autor |WorkShop