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

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>

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: 'slide', 'fade' 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)
          

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>