Foto 1 Foto 2 Foto 3 Foto 4 Foto 5
Caracteristicas
  • Lightweight
  • Flexible
  • Customizable
  • Released under MIT license
  • Compatible with Firefox 2 +, IE 6 +, Safari v4, Google Chrome 3 + and Opera 9 +

Implementacion

Download the Choco-Slider (Javascript and CSS). Having done so, include them and the jQuery library on the site:

<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>

Add the next container, edit images, alt and title your question:

<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>

Add the following before the closing </ head> to call Choco-Slider:

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

Personalizacion

In case you do not customize the options, it automatically will use the default options:

auto:true, (if you want automatic slider)
autoPause:true, (to stop the slider after clicking)
speedStrip:500, (Speed between the strips)
effect:'random', (There are three types: effect1, effect2 and random)
numberStrips:15, (number of strips to show)
sliderDelay:3000, (time delay between images transition)
transparencytitle:0.8, (Transparency of the title)
bChange: function(){}, (function necessary to complete)
aChange: function(){}, (function necessary to complete)
chocoEnd: function(){}, (function necessary to complete)
controlNavigation:true (Removing only show images)

Ejemplos

Example 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>

Example 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
Download
Language