Revisando los script de Dynamicdrive me encuentro con FeaturedContentSlider un slider sencillo de aplicar, incluso de personalizar.
FeaturedContentSlider o slider de contenido destacado, permite hacer una presentación de diapositivas pudiéndose seleccionar manualmente para ver o configurarlo para que gire automáticamente.
Cada contenido se define como HTML normal o por completo dentro de un archivo externo que puede ser incluido usando Ajax.
Entre sus caracterÃsticas:
- Modo de visibilidad "manual" o "auto", para la segunda, el control deslizante gira automáticamente el contenido hasta que el usuario selecciona un contenido para ver.
- Soporta dos formas de integración de los contenidos:
* dentro de las etiquetas DIV,.
* incluido desde un archivo externo.
- Efecto de atenuación (opcional) que se aplicará cada vez que cambia el contenido.
- Enlaces de paginación personalizada: puedes disponer de una secuencia de enlaces generados automáticamente o definirlos manualmente.
- Puedes decidir si quieres que el contenido sea seleccionado al hacer clic "onclick" o cuando se pase el mouse sobre los enlaces de paginación "mouseover".
- Puedes llamar a la función
- Capacidad de seleccionar una diapositiva en particular cuando se carga la primera página, pasando por parámetro de URL la posición de la diapositiva seguido del nombre del div contenedor, por ejemplo:
eso cargarÃa la diapositiva cuatro (4) del div nombre_del_slider cuando cargue la pagina por primera vez.
- Usa cookies para recordar el último contenido visto por el usuario al regresar a la página.
Dispone de una opción llamada "onChange" que nos permite controlar ese evento (se dispara cada vez que se cambia de diapositiva) y asà ejecutar código personalizado.
Para aplicarlo en primer lugar debemos descargar los siguientes archivos desde el sitio oficial:
contentslider.css (estilo por defecto)
contentslider.js (script)
loading.gif (imagen)
Luego de que las descargues, debes subirla a tu servidor y ya lo puedes usar.
Para aplicarlo lo primero es incluir el CSS y el script, lo hacemos entre etiquetas <head></head> asÃ:
Luego armamos el slider (debe ir entre etiquetas <body></body>):
El siguiente script debes colocarlo luego del anterior y por cada slider que vayas a usar:
* dentro de las etiquetas DIV,.
* incluido desde un archivo externo.
- Efecto de atenuación (opcional) que se aplicará cada vez que cambia el contenido.
- Enlaces de paginación personalizada: puedes disponer de una secuencia de enlaces generados automáticamente o definirlos manualmente.
- Puedes decidir si quieres que el contenido sea seleccionado al hacer clic "onclick" o cuando se pase el mouse sobre los enlaces de paginación "mouseover".
- Puedes llamar a la función
featuredcontentslider.jumpTo() en cualquier lugar de la página para ir a una diapositiva concreta dentro de un contenido particular.
<a href="javascript:featuredcontentslider.jumpTo('nombre_del_slider', num_diapositiva)">Ir a la diapositiva #</a>
- Capacidad de seleccionar una diapositiva en particular cuando se carga la primera página, pasando por parámetro de URL la posición de la diapositiva seguido del nombre del div contenedor, por ejemplo:
mi_domino.com/mi_pagina.html?nombre_del_slider=4
eso cargarÃa la diapositiva cuatro (4) del div nombre_del_slider cuando cargue la pagina por primera vez.
- Usa cookies para recordar el último contenido visto por el usuario al regresar a la página.
Dispone de una opción llamada "onChange" que nos permite controlar ese evento (se dispara cada vez que se cambia de diapositiva) y asà ejecutar código personalizado.
Para aplicarlo en primer lugar debemos descargar los siguientes archivos desde el sitio oficial:
contentslider.css (estilo por defecto)
contentslider.js (script)
loading.gif (imagen)
Luego de que las descargues, debes subirla a tu servidor y ya lo puedes usar.
Para aplicarlo lo primero es incluir el CSS y el script, lo hacemos entre etiquetas <head></head> asÃ:
<link rel="stylesheet" type="text/css" href="contentslider.css" /> <script type="text/javascript" src="contentslider.js"> /*********************************************** * Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script>
Luego armamos el slider (debe ir entre etiquetas <body></body>):
<!-- div contenedor "slider"--> <div id="slider1" class="sliderwrapper"> <div class="contentdiv"> <!-- aqui el contenido para la diapositiva 1 --> </div> <div class="contentdiv"> <!-- aqui el contenido para la diapositiva 2 --> </div> <div class="contentdiv"> <!-- aqui el contenido para la diapositiva 3 --> </div> <!-- agregas todas las que quieras--> </div> <!-- esta es el area de paginacion, el codigo dentro de lla se agrega dinamicamente --> <div id="paginate-slider1" class="pagination"></div>
El siguiente script debes colocarlo luego del anterior y por cada slider que vayas a usar:
<script type="text/javascript">
featuredcontentslider.init({
// ID del div contenedor
id: "slider1",
//metodos de inclusion: ["inline", ""] ó ["ajax", "path_ó_archivo"]
contentsource: ["inline", ""],
//paginación: "#increment" (1,2,3..), "markup", ["etiqueta1", "etiqueta2", etc]
toc: "#increment",
//etiquetas de paginacion (anterior y siguiente). Dejalo "" para ocultar.
nextprev: ["Anterior", "Siguiente"],
//evento para que indica como se mostran las diapositivas: "click" o "mouseover"
revealtype: "click",
//desvanecimiento [true/false, valor double(0.1 - 0.2 - 0.5 ...)]
enablefade: [true, 0.2],
//tiempo en rotar [true/false, tiempo en segundos (1=1000)]
autorotate: [true, 3000],
onChange: function(previndex, curindex){
// aqui tu script
// ese script se ejecutara cuando se produzca el evento onChange
// si lo deseas, no coloques nada
}
});
</script>
- Los comentarios están siendo moderados y serán publicados en la brevedad posible.