Crear un Slider Dinamico con Bootstrap 3, PHP y MySQL


 

El dia de hoy les mostrare como crear un slider dinámico o auto-gestionable usando Bootstrap 3, PHP y MySQL.

Este ejemplo lo realizo a partir de dos códigos anteriores si quieren profundizar mas Crear un slider o carousel de imagenes con bootstrap 3 y Subir imágenes al servidor y guardarlas con PHP y MySQL

Bueno lo que haremos sera utilizar las imágenes que ya hemos subido para generar el slider a partir de esta lista de imágenes.

Vídeo de mostrativo

En el vídeo se muestra el carousel generado y el funcionamiento de la administración.

Código

A continuación les dejo un gist donde esta el código mas importante para generar el slider o carousel.

Explicación

Les invito altamente a que ven el post sobre como crear un carousel para que entiendan como se crea 😉

A continuación les explico mas o menos las partes mas importantes del código.

  • En la linea 2 incluimos el archivo de conexión a la base de datos.
  • En la linea 3 ejecuto una funcion que obtiene un array con todas las imágenes que estén en la base de datos
  • En la linea 37 hacemos un if para saber si hay imágenes en la base de datos, de lo contrario mostramos una alerta en la linea 69 y cerramos el if en la linea 70
  • En la linea 42 a la 44 hacemos un recorrido del array de imágenes para crear los indicadores, usamos un contador $cnt para saber cuando el indice de la imagen es 0 para colocar la clase “active”
  • En la linea 49 a la 54 creamos los contenedores para las imágenes, mostramos las imágenes(Linea 51) y el titulo de la imagen (Linea 52), también usamos un contador $cnt para saber cuando el indice de la imagen es 0 (cero) y agregarle la clase “active”, ya que solo una imagen puede esta activa.

Esta sera toda la explicación necesaria para generar el slider dinamicamente a partir de la lista de imágenes de la base de datos.

Descarga

En la descarga les dejo el todos los archivos para que el ejemplo funcione de la misma manera que el vídeo demostrativo.

[sociallocker]

Link: https://drive.google.com/open?id=1wVt-qHTY2Q7YcGXPVR48EstmWXD9_4yP

[/sociallocker]

No se olviden de dejar un comentario y suscribirse a mis canales!

Saludos a todos


Leave a comment

3 thoughts on “Crear un Slider Dinamico con Bootstrap 3, PHP y MySQL