Sliders y presentaciones de diapositivas
A continuación se muestra el uso de la herramienta de creación de pases de diapositivas o sliders que se incluye en FastLight.
Ha sido pensada para cubrir la mayoría de las situaciones habituales y permite un grado de personalización bastante interesante.
Índice
- Una sola diapositiva
- Una sola diapositiva, con modales
- Varias diapositivas visibles, con modales
- Solamente avance manual
- Solamente avance automático
- Número de diapositivas según la resolución de pantalla
- EJEMPLO FINAL: slider completo con transiciones, modales, leyendas y descripciones
Una sola diapositiva
Para crear un pase de diapositivas, debemos incluir lo siguiente:
- El fichero de CSS:
/css/components/sliders.css. - El fichero de JS:
/js/components/Slider.js.
Una vez hecho esto, podremos crear nuestras presentaciones a partir del identificador del elemento padre para el slider y un objeto de opciones (que podemos crear en JSON). Tal y como se muestra en este primer ejemplo.
Estas son las opciones del objeto de configuración:
numImagenes: número de imágenes a mostrar simultáneamente (obligatorio).botones: true/false permite indicar si queremos botones o no para realizar el avance manual. Por defecto activado.modales: true/false permite indicar si queremos activar los modales en el slider, para que las fotos se abran a pantalla completa.tiempo: tiempo para realizar el avance automático. Se puede indicar 0 u omitir este parámetro para indicar que no se desea avance automático.proporcion: relación de aspecto para las imágenes, por defecto 4/3.fotos: array con las URL de las fotos a colocar en la presentación (obligatorio).captions: array con las leyendas para cada una de las imágenes.descriptions: array con las descripciones para cada una de las imágenes.
Para realizar un pase de diapositivas mostrando solamente una, implemente
hay que indicar numImagenes : 1 en el objeto de configuración.
Ejemplo
Código del ejemplo
NOTA
Se deben tener al menos dos imágenes más de las que se muestran de forma simultánea en pantalla. Por ejemplo, en el caso anterior que mostramos una, debemos tener un listado de un mínimo de tres.
Las dos imágenes extra se colocan en los extremos para que funcionen
bien las transiciones suaves hacia los lados. La primera imágen visible,
es en realidad la segunda de la lista fotos.
Una sola diapositiva, con modales
Si queremos usar también modales, hay que incluir también el fichero
ubicado en /js/Modal.js.
Una vez cargado el fichero, activaremos los modales
con la opción del objeto de configuración 'modales':true.
Puedes comprobar suu funcionamiento haciendo clic sobre las distintas imágenes.
Observad también que en este ejemplo se ha modificado la relación de aspecto para mostrar diapositivas en orientación vertical.
Código del ejemplo
Ejemplo
Slider con múltiples diapositivas visibles y modales
En este ejemplo se ha indicado que el número de imágenes simultáneas
a mostrar es de cuatro usando 'numImagenes':4. Además están
activados también los modales.
Ejemplo
Código del ejemplo
Solamente avance manual
Para indicar solamente avance manual, el objeto de configuración
debe tener 'tiempo':0, aunque también será solamente
manual si indicamos un tiempo negativo u omitimos directamente el
parámetro tiempo.
Código del ejemplo
Ejemplo
Solamente avance automático
Si no queremos que el usuario haga avanzar o retroceder manualmente las diapositivas,
podemos indicar 'botones:false' en el objeto de configuración.
Ejemplo
Código del ejemplo
Número de diapositivas variable según pantalla
Para hacer variable el número de imágenes que se muestran en función del tamaño disponible en pantalla, podemos jugar un poco con JavaScript.
Mediante la propiedad innerWidth del objeto Window, podemos detectar
el espacio disponible y calcular el número de diapositivas a mostrar,
tal y como se muestra en el siguiente ejemplo donde:
- Si hay más de 800 píxeles de ancho se muestran cuatro imágenes.
- Entre 800 y 400 se muestran 2.
- Menos de 400 se muestra solamente 1.
Para hacer pruebas, podéis redimensionar la ventana del navegador y pulsar F5 para recalcular el número de imágenes a mostrar.
Ejemplo
Código del ejemplo
EJEMPLO FINAL
Slider completo, con número de imágenes variable, múltiples imágenes, avance manual y automático e imágenes con leyenda y descripción.
Para indicar las leyendas se ha usado la propiedad captions del objeto de
configuración, mientras que para indicar las descripciones se usa la propiedad descriptions.