En esta ocasion les ofrecemos Coin Slider, un slideshow de imagenes hecho en Jquery, que nos permitira crear presentaciones elegantes a nuestros diseños, además de ofrecernos varias opciones únicas en las transiciones de las imágenes.
Caracteristicas
- Efectos de transiciones unicas.
- Compatible con Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
- Valid markup
- Configuración flexible
- Auto slide
- Caja de navegación
- Liviano (solo 8kb)
- Imagenes con vinculo
- Uso gratuito bajo licencia MIT
- Totalmente personalizable desde CSS
Implementación:
Primero bajamos coin-slider.min.js y lo incluimos a nuestro código:
|
1
2
3
|
<script type=“text/javascript” src=“jquery-1.4.2.js”></script>
<script type=“text/javascript” src=“coin-slider.min.js”></script>
<link rel=“stylesheet” href=“coin-slider-styles.css” type=“text/css” />
|
A continuación agregamos el contenido del Slider, creamos una div con las imagenes y la descripcion de cada imagen de esta manera:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id=‘coin-slider’> <!— No cambiar nombre, hace funcionar el script —>
<a href=“enlace_1” target=“_blank”>
<img src=‘foto_1.jpg’ >
<span>
Descripcion for foto_1
</span>
</a>
......
......
<a href=“enlace_X”>
<img src=‘foto_X.jpg’ >
<span>
Descripcion for foto_X
</span>
</a>
</div>
|
Llamamos el script:
|
1
2
3
4
5
|
<script type=“text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider();
});
</script>
|
Coin Slider te ofrece varias opciones para ayudarte a crear el Slideshow que buscas, he aqui un ejemplo:
|
1
2
3
4
5
|
<script type=“text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 500, navigation: false, delay: 5000 });
});
</script>
|
Solucionado el error de load(), gracias a José por el dato