Foto 1 Foto 2 Foto 3 Foto 4 Foto 5
Caracteristicas
  • Liviano
  • Flexible
  • Personalizable
  • Liberado bajo MIT licence
  • Compatible con Firefox 2+, IE 6+, Safari v4, Opera v10, Google Chrome 3+ y Opera 9+

Implementacion

Descargue los archivos del Choco-Slider (Javascript y CSS). Una vez hecho eso, inclúyalos en el sitio, junto a la librería jQuery:

<link rel="stylesheet" href="chocoslider.css" type="text/css" />

<script type="text/javascript" src="jquery.chocoslider.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Agregue el siguiente contenedor, modifique las imágenes, su alt y su título correspondiente:

<div id="slider">
	<img src="img/img_1.jpg" alt="" title=""/>
	<img src="img/img_2.jpg" alt="" title=""/>
	<img src="img/img_3.jpg" alt="" title=""/>
	<img src="img/img_4.jpg" alt="" title=""/>
	<img src="img/img_5.jpg" alt="" title=""/>
</div>

Agregue lo siguiente antes del cierre del </head> para llamar al Choco-Slider:

<script type="text/javascript">
  $(window).load(function() {
  	$('#slider').chocoslider();
  });
</script>

Personalizacion

En caso de que no personalice las opciones, automáticamente se van a usar las opciones por defecto:

auto:true, (si queremos automático el slider)
autoPause:true, (para detener el slider luego de hacer click)
speedStrip:500, (Velocidad entre las tiras)
effect:'random', (Hay tres tipos: effect1, effect2 y random)
numberStrips:15, (cantidad de tiras a mostrar)
sliderDelay:3000, (tiempo de retraso entre la transición de imágenes)
transparencytitle:0.8, (Transparencia del título)
bChange: function(){}, (función necesaria para finalizar)
aChange: function(){}, (función necesaria para finalizar)
chocoEnd: function(){}, (función necesaria para finalizar)
controlNavigation:true (Si se quita solo se mostrarán las imágenes)

Ejemplos

Ejemplo Nº 1:

<script type="text/javascript">
  $(window).load(function() {
  	$('#slider').chocoslider();
		auto:true,
		autoPause:true,	 
		speedStrip:500,	 
		effect:'effect1',
		numberStrips:15,
		sliderDelay:3000,
		transparencytitle:0.8,
		bChange: function(){},
		aChange: function(){},
		chocoEnd: function(){},
		controlNavigation:true
  });
</script>

Ejemplo Nº 2:

<script type="text/javascript">
  $(window).load(function() {
  	$('#slider').chocoslider();
		auto:true,
		autoPause:false,	 
		speedStrip:500,	 
		effect:'random',
		numberStrips:15,
		sliderDelay:6000,
		transparencytitle:1.0,
		bChange: function(){},
		aChange: function(){},
		chocoEnd: function(){},
		controlNavigation:false
  });
</script>

El Postre
Descargar
Idioma