Jquery - Coin Slider

Este plugin es realmente útil para generar animaciones en las transiciones de las imágenes dentro de un contenedor.

El plugin se puede descargar desde el siguiente link:
http://workshop.rs/projects/coin-slider/

Para integrarlo en nuestra página web es realmente sencillo:

Añadimos las referencias de nuestros ficheros en el HTML

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />

Seguidamente creamos un contenedor que contendrá todas las imágenes que quedamos añadir al slider.

<div class="animacion" id="animacion">
<img src="../img/foto1.jpg" width="600" height="450" />
<img src="../img/foto2.jpg" width="600" height="450" />
<img src="../img/foto3.jpg" width="600" height="450" />
<img src="../img/foto4.jpg" width="600" height="450" />
<img src="../img/foto5.jpg" width="600" height="450" />
</div>

Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.

Como último paso habrá que aplicar al contenedor "animacion" el plugin.

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