Choco-Slide, un plugin para jQuery para crear un Slider. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Choco-Slide, un plugin para jQuery para crear un Slider

Choco-slide es uno de los muchos plugin que se han creado para jQuery para crear un Slider de forma sencilla y con muy pocos pasos. La ventaja de este plugin respecto a otros, es que este es muy liviano, apenas 7 Kb de librería.

Entre las características que podemos destacar están:

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

Como cualquier plugin, lo primero que debemos de hacer, es la descarga del plugin. Una vez hecho esto, lo añadimos a nuestro proyecto junto con 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>

Después, lo que hacemos, es incluir un contenedor que tendrá las imágenes que formarán parte del slider.

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

Por último solo falta hacer la llamada al plugin. Esto se consigue de la siguiente manera.

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

El plugin por defecto tiene unos valores asignados a sus opciones, pero esto lo podemos modificar por medio de las siguientes opciones.

Auto: true, si queremos automático el slider
autoPause:true, para detener el slider cuando se hace click.
SpeedStrip:500, velocidad entre las imágenes.
Effect:'random', tres posibles tipos, effect1, effect2 y random
numberStrips:15, número de imágenes a mostrar.
SliderDelay:3000, tiempo de retraso entre la transición de imágenes
transparencytitle:0.8, transparencia del título
controlNavigation:true, si queremos tener control para movernos sobre las imágenes.

Un ejemplo con estas opciones, puede ser:

$(window).load(function() {
$('#slider').chocoslider();
auto:true,
autoPause:true,	 
speedStrip:500,	 
effect:'effect1',
numberStrips:15,
sliderDelay:3000,
transparencytitle:0.8,
controlNavigation:true
});

Vía: Sitio oficial