Carrusel de imágenes dinámico

 En Bootstrap podemos encontrar la forma de crear un carrusel pero las imágenes son estáticas.

Para poder crear un carrusel de imágenes dinámicas utilizaremos una librería llamada owl.carousel.

Para el ejemplo crearemos una tabla en nuestra base de SQL Server con la siguiente estructura:

Creamos un proyecto con una Webform, y la siguiente estructura de archivos:

El archivo animate.css contiene los efectos de las transición de las imágenes, main.js tendrá los indicadores de Prev y Next.

Creamos la conexión a nuestra base de datos desde el web.config.

Llamamos en el código de Webform las enlaces de las librerías al inicio y final.

Creamos un DIV donde llamaremos las imágenes con un REPEAT, indicamos los nombres de los campos str_titulo y str_imagen que contiene la ruta de las imágenes.

El código para llamar la información es llenando un datatable con toda la información que tiene la tabla carrusel.

Ejecutamos la Webform y podremos ver el resultado.

Las imágenes se visualizaran con un efecto de "slideOutDown" que se indica en el archivo main.js.

Y el efecto se ubica en el archivo animate.css.

En breve subire el código a mi repositorio GitHub.