Arriba abajo abajo arriba

Contentslider es un pequeño script que nos permite crear bloques con contenidos que pueden efectuar scrolls de manera manual o automática.

En el sitio, puede descargarse un ZIP que contiene una serie de ejemplos pero, de todo su contenido, lo único que necesitamos es el archivo slider.js que subimos a un servidor y que luego cargamos en la plantilla, justo antes de </head>:

<script type="text/javascript" src="URL_slider.js"></script>

El área donde queremos usar el efecto la definimos como una serie de bloques DIV. Un ejemplo sencillo:

<div class="sliderDemo">
<div id="sliderDemo" class="sliderDemoContent">
<div id="sliderSeccion-1" class="sliderSeccion"> el contenido </div>
<div id="sliderSeccion-2" class="newssection"> el contenido </div>
<div id="sliderSeccion-3" class="newssection"> el contenido </div>
</div>
</div>

Claro que, debemos establecer las propiedades de esos bloques pero son muy pocas las propiedades obligatorias, el resto es muy personal:

<style type="text/css">
.sliderDemo { /* es el área general */
position:relative;
overflow:hidden;
height:VALORpx;
}
.sliderDemoContent { /* es el área interior */
position:absolute
}
.sliderSeccion { /* cada una de las secciones que se mostrarán */
}
</style>

Cada DIV debe tener un ID es decir, un nombre único y los de las secciones deben ser iguales entres si con el agregado de un guión y un número correlativo entre 1 y 50:

<div id="section-1" class="section"></div>

¿Cómo hacemos que funcione?

Hay dos modelos diferentes. Uno hace que el script funcione de manera automática y realice un scroll constante. Para este, lo que debemos hacer es llamar a la función inmediatamente después del código HTML que la contiene:

<script type="text/javascript">autoScroll('sliderDemo','sliderSeccion',5,true);</script>

La función es esta:

autoScroll(id,prefix,timer,restart)

donde:

id es el ID del bloque general
prefix es el prefijo que le colocamos a los IDs numerados con el contenido de las secciones
timer es el tiempo que permanece visible cada sección
restart es false si no queremos que sea contínuo y true si queremos que lo sea

También hay una función que nos permite detenerlo:

<a href="javascript:void(0);" onclick="cancelAutoScroll('sliderDemo')">PAUSAR</a>

Y para restaurarlo, hacemos lo mismo que antes, volvemos a llamar a la función de autoscroll:

<a href="javascript:void(0);" onclick="autoScroll('sliderDemo','sliderSeccion',5,true)">
CONTINUAR</a>

El segundo modelo es similar al anterior pero su característica principal es que no hace un scroll constante sino que nos muestra un contenido determinado por vez.

El código HTML es exactamente igual al anterior y lo único que debemos tener en cuenta es que si usamos varios, los nombres de los IDs deben ser diferentes.

En este caso, no hace falta llamar a ninguna función para que se ejecute, eso, lo hacemos con enlaces usando los eventos onClick, onMouseOver, onMouseDown, etc:

<a href="javascript:void(0);" onmousedown="slideContent('section-1')">;EJEMPLO 1</a>
<a href="javascript:void(0);" onmousedown="slideContent('section-2')">EJEMPLO 2</a>
<a href="javascript:void(0);" onmousedown="slideContent('section-3')">EJEMPLO 3</a>
<a href="javascript:void(0);" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">SUBIR</a>
<a href="javascript:void(0);" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">BAJAR</a>

El último ejemplo es como el anterior excepto que sólo hay una gran sección de texto y utilizamos dos enlaces para subir y bajar por el contenido:

<a href="javascript:void(0);" onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')">SUBIR</a>
<a href="javascript:void(0);" onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')">BAJAR</a>