Coin Slider: Slider de imagenes muy facil de implementar con jQuery

closeHola! hace 4 years 3 months 20 days que escribí esta entrada, puede que esta información ya no sea valida en la actualidad, por favor se comprensivo conmigo cuando comentes 🙂

Coin Slider es un plugin de jQuery que permite crear carrusel de imágenes muy fácilmente en nuestra web, el uso es muy basico pero con algunas modificaciones y buenas ideas se pueden hacer diseños muy buenos.



Lo primero que tenemos que hacer es agregar en nuestro header los archivos necesarios:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

Después agregamos el script que activara el plugin, esto también lo hacemos en nuestro header

<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 500,height:200 });
	});
 
</script>

Finalmente agregamos el html necesario con las imágenes en nuestro body

<div id="container">
<div id="coin-slider">
<a href="http://jodacame.com"><img src="images/imagen1.jpg" alt="" />Titulo Imagen 1</a> 
<a href="http://jodacame.com"><img src="images/imagen2.jpg" alt="" />Titulo Imagen 2</a> 
<a href="http://jodacame.com"><img src="images/imagen3.jpg" alt="" />Titulo Imagen 3</a> 
<a href="http://jodacame.com"><img src="images/imagen4.jpg" alt="" />Titulo Imagen 4</a> 
<a href="http://jodacame.com"><img src="images/imagen5.jpg" alt="" />Titulo Imagen 5</a> 
<a href="http://jodacame.com"><img src="images/imagen6.jpg" alt="" />Titulo Imagen 6</a>
</div>
</div>

Como podemos darnos cuenta la implementacion es muy fácil y obtendremos resultados muy buenos.


EjemploDownload

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *