En este post te quiero mostrar cómo podemos usar el template del Carousel para crear un slideshow responsive el cual es muy usado en muchos sitios web.

Ante todo necesitamos tener algunas imágenes para esta prueba, en mi caso usé 3 imágenes de pixabay.com, tamaño 1280 x 437.

Slide 1: Ir a Imagen

Slide2: Ir a Imagen

Slide3: Ir a Imagen

Necesitamos subir estas tres imágenes a nuestro espacio de trabajo 🙂

#APP_FILES#Slide1.jpg

#APP_FILES#Slide2.jpg

#APP_FILES#Slide3.jpg

Creamos una página en blanco o utilizamos una pagina existente como la página de inicio de la aplicación.

Agregamos una región de contenido estático y le colocamos un nombre, por ejemplo: Slideshow. Luego creamos tres subregiones dentro de esta región padre que llamaremos: Slide1, Slide2 y Slide3.

Seleccionamos a la región padre que hemos llamado «Slideshow» y le asignamos como template como Carousel Container.

Ahora para cada subregión seleccionamos el template como «Blank with Attributes» tanto para la subregión Slide1, como Slide2 y Slide3.

Seleccionamos la subregión Slide1 y dentro del Source de la región ingresamos el siguiente código:

<img src="#APP_FILES#Slide1.jpg "/>

Realizamos lo mismo para las dos otras subregiones colocando la imagen que corresponde a cada subregión.

Seguidamente hacemos clic en la región padre Slideshow y luego hacemos clic en Template Options en propiedades de la región y configuramos el Timer en 5 Seconds. Hacemos clic en el botón Ok. Automáticamente las imágenes se irán cambiando cada 5 segundos.

A este punto si ejecutamos la página veremos que las imágenes no son responsive.

Para hacer responsive las imágenes, hacemos clic en el nodo principal de la página, es decir en el nombre de la página, y en propiedades de la misma colocamos las siguientes reglas CSS en el recuadro de CSS inline.

img {
width:100%;
max-width:100%;
height:auto;
}


Volvemos a ejecutar la página y ahora vemos que el slideshow es responsive a la pantalla. 🙂

Espero haya sido de utilidad!

Hasta la próxima!