Uso del Slider

El Slider hará dinámico nuestro sitio, con el uso de imágenes de nuestro producto o servicio, reproduciendo en automático o con parámetros.

R
Escrito por Rodrigo García
Actualizado hace más de una semana

Para incluirlo a nuestra sección debemos de ir a nuestro menú de "Añadir Widget", seleccionar el elemento de "Slider" y arrastrarlo a la sección donde lo necesitemos.

Aparecerá la ventana de "Editar Slides", donde tendremos que dar click en el botón azul con el símbolo de mas, para poder cargar nuestras imágenes y editar algunos valores.

Aparecerá la ventana de "Editar fondo",  que es el editor de cada capa que formará nuestro slider,la capa puede ser una "Capa de Color Sólido"  o puede ser una "Capa de imagen", recomendamos que se incluyan imágenes para que sea más vistoso.

Para incluir las imágenes debemos seleccionar la casilla de "Imagen" o en el botón azul de "Cambiar Imagen".

La medida para la imagen que recomendamos es de 1200 x 400 pixeles, para que tenga una mejor vista y no se corten nuestras imágenes

Cargaremos varias imágenes para lograr un buen efecto de cambios.

Cada capa de nuestro "Slider" tendrás sus propios atributos, por ejemplo:

"Duración de Animación"
Es el tiempo de de duración de la animación que hayamos escogido para nuestra capa, podemos escoger un tiempo de entre 0 segundos (0 ms) hasta 2 segundos (2000 ms).

"Duración de Cada Elemento"
Es el tiempo total que se mostrara nuestra capa antes del cambio con la siguiente, podemos escoger un tiempo de entre 0.5 segundos (500 ms) hasta 15 segundos (15000 ms).

Si damos click en la opción de "Transición de Elementos" se desplegaran los distintos modos de animación que podemos agregarle a las imágenes.

Hay varias opciones que podemos seleccionar para agregar más características a nuestro "Slider" por ejemplo:

"Pausar al posar el mouse sobre slider"
Al tener seleccionada esta opción el usuario podrá pausar la animación en la imagen que el quiera ver con mas detalle tan solo con poner el mouse sobre ella. 

Al momento de posicionar el mouse en el "Slider" se pausara la animación y aparecerán los controles.

"Mostrar cuenta regresiva"
Al tener seleccionada esta opción nos mostrará la duración de la transición de la imagen a través de una barra de progreso en la parte de abajo del slider.

"Flechas de Navegación"
Al tener seleccionada esta opción se mostrarán las flechas de navegación en el "Slider", las cuales son un recuadro con una flecha de avance y otra de retroceso, para que el usuario pueda cambiar las imágenes sin tener que esperar la transición.

"Viñetas de Navegación"
Al tener seleccionada esta opción aparecerán en la parte de abajo del "Slider" un circulo por cada imagen que tengamos en, esto para ayudar al usuario a clasificarlas y si alguna le gusto pueda saber cuando aparecerá o en su caso cambiarla hasta llegar a ella con la ayuda de las flechas de navegación.

¿Ha quedado contestada tu pregunta?