menu CSS

CSS

A/D

Varios scripts pequeños

Fiestas

neones

Mis cosas


En todo éste tiempo sin otros pitos que tocar y con ganas de hacer algo diferente, buscando por la red me encontré con unos tutoriales (entre otros muchos menos comprensibles por el ididoma) al principio me sonaban un poco a chino debido a un desconocimiento total, tiempo tenia, y ganas de aprender así que empecé a hacer pruebas con Javascript y una tabla html de esta forma llegué a construir este slider, empezando por uno que solo avanzaba hacia adelante y hacia atrás y poco a poco le fui incorporando funciones hasta llegar a éste widget dando por finalizado el script que luego fui probando estilos y aqui estan los resultados.

Con éste práctico slider se pueden poner un conjunto de fotos de cualquier evento, de un autor determinado o de varios, respetando siempre los derechos de autor, devolviendo el enlace de la foto al sitio donde está ubicada y colocando un bloque de atribución; El sistema se inicia automáticamente al cargar la página pasando una imagen cada cuatro segundos, (predeterminada) no necesita el botón de parada, esa función se hace en cualquiera de las flechas si el visitante decide ver las fotos en modo manual pasando una cada vez pulsando las correspondientes flechas, también puede volver a pasar al modo automático, selecionándo el intervalo de espera en otros seis campos mas de tiempo diferentes en el desplegable Tiempo   y pulsando  OK  (si no se seleciona nada pasa una cada cuatro segundos como al inicio), a éstos le he puesto un texto de fondo a la caja que solo se ve cuando se pasa manualmente al llegar al final, en automático raras veces.

Si las medidas coinciden solo hay que susrituír las direcciones "https://....." que hay las listas del código JS, teniendo cuidado de no perder ninguna coma ni las comillas y ya está, podéis poner todas las fotos que queráis (sin limite), el tiempo que tiene de espera entre fotos en el inicio es de cuatro segundos, si queréis lo cambiáis por otro en: ( parseInt(1000.0 * 4)) (4 segundos) y en código JS no hay nada mas que hacer, en cuanto a el estilo color, forma, tamaño, posición etc. es completamente personalizáble con CSS, en todos ellos gracias a Oloblogger que me dio unas ideas fabulosas: como el posicionamiento de las flechas y esconderlas entre otras cosas, han quedado como se ven acontinuacion.

Slider automatico/manual de tiempo variable

See the Pen Slider con selector de tiempo variable reversible by villalisaceliano (@aceliano) on CodePen.

Esta otra versión es la que utilizo en sustitución de las de Panoramio,(que tienen los días contados) un poco mas sencilla a la hora hacer las listas, el funcionamiento es idéntico al anterior, con la diferencia que ésta es de diseño adaptable (RWD), el JS esta modificado para utilizar fotos de la misma plataforma aligerando el contenido de las listas, el único inconveniente es que si coinciden dos o tres en la misma ventana no son compatibles, solo funciona uno pero siempre hay solución, se incorpora uno con un iframe y todo arreglado.

Slider automatico/manual de tiempo variable (RWD)

See the Pen Slider auto/man tiempo fijo by villalisaceliano (@aceliano) on CodePen.

En éste modelo las imagenes son iguales de tamaño en proporción por lo que los espacios se pueden ajustar a tamaño completo, si son desiguales como las de el anterior que fue el que me empujo a hacer estos sliders y podeis ver en otro lugar de éste blog , hay que ir ajustando las medidas para que nos corte las imágenes lo menos posible y dejar espacios vacios.

Este que viene a continuación posiblemente sea el mas sencillo de todos, y digo de todos no solamente de los míos sino también de los que hay por ahí, solamente tiene avance y retroceso manual, todos ellos funcionan por si solos, no dependen de ningún archivo externo, es posible alojar el CSS y el Javascript en un archivo externo para simplificar el html

Slider sencillo de paso manual

See the Pen Slider Sencillo by villalisaceliano (@aceliano) on CodePen.

Y esto es todo, aqui los dejo por si alguno le interesa, o quizás pueda mejorarlos, compartiendo aprendemos y todos ganamos.



Dejanos tu opinión

No hay comentarios:

Publicar un comentario

Síguenos por e-mail

Cartel fiestas