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>