Carousel Bootstrap dinámico con PHP y MySQL

 

He decidido  crear un Carousel  de  imágenes con la capacidad de poder administrar el mismo en  donde se podrá: listar, crear, editar y eliminar las imágenes del carousel,  por lo que en este tutorial voy a mostrar cómo crear un Carousel de imágenes y para ello utilizare el Carousel de  Bootstrap  para obtener imágenes, el título y la descripción de la base de datos y mostrarlos a manera de  diapositivas de  imágenes. He creado un slider muy simple y fácil de entender usando PHP y MySQL para la consulta de datos. Además el proyecto cuenta con un pequeño panel de administración para que podamos administrar las imágenes que deberán mostrarse en el carousel.

Carousel Bootstrap dinámico

Carousel Bootstrap dinámico con PHP y MySQL

Diseño de la base de datos

Para este ejemplo hemos creado una base de datos llamada carousel la cual tiene la estructura siguiente,  para hacer funcional este script, se deberá crear manualmente la base de datos MySQL, luego ejecutar la consulta siguiente en la base de datos que hemos creado.

Conexión a la base de datos

Para conectarnos a la base de datos creada en el paso anterior debemos editar el archivo config/conexion.php,  y luego colocar los datos de conexión según corresponda a nuestro servidor de base de datos.

Archivo index.php

El archivo index.php contiene el código necesario para poder mostrar nuestras slide dentro del carousel, las cuales son cargadas desde nuestra base de datos MySQL

Administración del Carousel

Para la administracion de l carousel se ha creado el archivo sliderslist.php, el cual hace de una llamada al archivo ajax/slider_ajax.php, el código es el siguiente:

ajax/slider_ajax.php

Agregar una nueva diapositiva al carousel

 

El archivo slidesadd.php, mediante el uso de dos funciones JavaScript realiza: la actualización en la base de datos de un slide y sube al servidor una nueva imagen para que esta sea mostrada en el carousel.

ajax/upload_slide.php

ajax/editar_slide.php

Editar una diapositiva al carousel

El archivo slidesedit.php, se encarga de mostrar el formulario para la actualización de datos de una slide o diapositiva.

Bien ahora puedes actualizar fácilmente  las imágenes y mostrarlos en Carousel, este código podría ser  útil para los desarrolladores web y diseñadores web que deseen una solución rápida para mostrar imágenes con control deslizante en algún sitio web.

Esperamos que les guste este tutorial. Si tienes alguna duda háznosla saber dejando un comentario.

Para descargar los archivos, debes realizar cualquiera de las siguientes acciones sociales: 

  • Alejandro Guillan

    Hola he intentado descargar el archivo, pero no deja me lo podrías enviar, desde ya muchas gracias

  • Obed

    Hola Alejandro, para descargar el archivo pulsa sobre el botón descargar, luego te aparece una ventana como la imagen adjunta, luego click en cualquiera de los botones sociales para compartir en cualquiera de tus redes sociales, una vez hayas compartido se generará un enlace para la descarga.

    • Alejandro Guillan

      lo he hecho varias veces pero no sale el link, gracias

      • Obed

        Ve al siguiente enlace: obedalvarado.pw/demo/carousel.rar
        luego me comentas como te va!

  • onofre

    Holaa muchas gracias por este aporte!!! me gustaria saber como añadir efectos en las transiciones del carrousel graciass

    • Obed

      Hola, puedes basarte en el siguiente tutorial para añadir efectos: http://codepen.io/Rowno/pen/Afykb

      • onofre

        Muchas gracias voy a intentarlo

        • Obed

          Inténtalo y me cuentas como te va 🙂

          • onofre

            Hola solo puedo cambiar la transicion, pero añadir mas no, lo que queria es poner una transicion diferente a cada imagen

            Saludos.

          • onofre

            Hola nada no puedo poner una transicion diferente a cada imagen…si alguien lo tiene se lo agradezco mucho

            Saludos.

          • onofre

            Buenos días

            Le añadí Coin Slider :
            http://www.actualidadjquery.es/2012/01/02/coin-slider-transiciones-espectaculares-de-imagenes-en-jquery/

            Y ahora tengo diferentes transiciones, pero ya no es responsive con el coin-slider.min.js

            Saludos.

          • Obed

            Hola buen día.
            Gracias por el aporte de seguro a alguien más le será de utilidad!

  • David Lopez

    Muy buen aporte un 9, una pregunta como puedo agregar una barra de proceso al momento de cargar la imagen, es decir que se visualice en porcentaje de la carga de la imagen.

    • Obed

      Gracias por tu comentario, para la labor que andas buscando, te sugiero que le eches un vistazo al siguiente post: http://goo.gl/jLw5eC
      Está en Ingles, pero te aseguro que te servirá

  • Jose Mancini

    Que buen aporte, Gracias.

  • castry arenas

    buen dia tengo el siguiente problema Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in C:xampphtdocswwwHistodontSeguridadapplicationviewhomeindex.php on line 150 y en esa linea de codigo tengo esto $nums_slides=mysqli_num_rows($sql_slider); que podira ser.
    gracias

  • Fernando Cores abalo

    hola, como lo podría añadir a mi theme que hice con bootstrap???
    un saludo

  • Flor Rodriguez

    ayudenme con el link de descarga.. necesito hacer algo asi para mi proyecto. gracias o correo florsitap.rodriguez20@gmail.com

  • Alvaro Vasquez

    hello

  • Luis

    Hola Amigo muy bueno tu trabajo lo descargue y tengo el sgte. problema al subir una imagen con el ancho y alto recomendado no la muestra igual que las otras me podrias ayudar porfa. gracias

  • David Lopez

    Nuevamente muy buen trabajo y documentado, tan solo tengo una duda trato de subir fotografias directas de mi camara Canon el formato es DSC_0003.JPG no se por que no sube nada en formato .JPG

    // Permitir que ciertos formatos de archivo
    if($imageFileType != “jpg” && $imageFileType != “JPG” && $imageFileType != “png” && $imageFileType != “jpeg” && $imageFileType != “gif” ) {
    $errors[]= “Lo sentimos, sólo archivos JPG, JPEG, PNG & GIF son permitidos.”;
    $uploadOk = 0;
    }