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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| include "admin/db.php"; | |
| $images = get_imgs(); | |
| ?> | |
| <!– Powered by Evilnapsis http://evilnapsis.com/ –> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Carouseles</title> | |
| <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-inverse"> | |
| <div class="container"> | |
| <!– Brand and toggle get grouped for better mobile display –> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="./">Carousel</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav"> | |
| <li><a href="./">Inicio</a></li> | |
| <li><a href="./admin" target="_blank">Administar</a></li> | |
| </ul> | |
| </div><!– /.navbar-collapse –> | |
| </div><!– /.container-fluid –> | |
| </nav> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <?php if(count($images)>0):?> | |
| <!– aqui insertaremos el slider –> | |
| <div id="carousel1" class="carousel slide" data-ride="carousel"> | |
| <!– Indicatodores –> | |
| <ol class="carousel-indicators"> | |
| <?php $cnt=0; foreach($images as $img):?> | |
| <li data-target="#carousel1" data-slide-to="0" class="<?php if($cnt==0){ echo 'active'; }?>"></li> | |
| <?php $cnt++; endforeach; ?> | |
| </ol> | |
| <!– Contenedor de las imagenes –> | |
| <div class="carousel-inner" role="listbox"> | |
| <?php $cnt=0; foreach($images as $img):?> | |
| <div class="item <?php if($cnt==0){ echo 'active'; }?>"> | |
| <img src="<?php echo 'admin/'.$img->folder.$img->src; ?>" alt="Imagen 1"> | |
| <div class="carousel-caption"><?php echo $img->title; ?></div> | |
| </div> | |
| <?php $cnt++; endforeach; ?> | |
| </div> | |
| <!– Controls –> | |
| <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
| <span class="sr-only">Anterior</span> | |
| </a> | |
| <a class="right carousel-control" href="#carousel1" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
| <span class="sr-only">Siguiente</span> | |
| </a> | |
| </div> | |
| <?php else:?> | |
| <h4 class="alert alert-warning">No hay imagenes</h4> | |
| <?php endif; ?> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="jquery.min.js"></script> | |
| <script src="bootstrap/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
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
Excelente material para práctica, muchas gracias.
muchas gracias, lo probaré
Excelente! gracias