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

  • Pingback: Carrusel dinámico con Material Design y Bootstrap - Sistemas Web()

  • 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;
    }

  • josue isaac pool kumul

    Quisiera saber como activo la paginacion y que me muestre 6 por pagina, ayuda

    • Obed

      Hola josue, edita el archivo ajax/slider_ajax.php en la linea 26 se encuentra la variable: $per_page = 12;

  • josue isaac pool kumul

    disculpa hay una forma de pasarle parametros , ejemplo lo modifoque para unos produsctos y quiero que me muestre por rango de fechas, pero no se como enviarlo, ya intente de varias formas pero no se envia a ajax_slider.php,

    lo solucione pasado todo el codido del slider ajax,en un div donde lo muestro, pero la paginacion no sirve, quisiera saber si hay forma de combinar el ajax_slider junto y no llamandolo, que sirva la paginacion.

  • danner

    Gracias excelente, tengo una inquietud como podría quitar la parte donde inserta la imagen demo.png Cada vez que se recarga la pagina se inserta un nuevo registro demo.png en la base de datos.

    • Obed

      En el archivo: slidesadd.php se crea un registro en la base de datos.

  • jean edwards

    Si quisiera eliminar o no ser obligatorio algún campo por ejemplo de descripción, o hacer q no sea obligatorio…
    les agradecería la ayuda..

  • Dario Coronel

    Hola queria consultarte… anda bien salvo la opcion de agregar slider, no me agrega ninguna imagen nueva, solo actualiza la ultima siempre por mas que le des a la opcion de agregar slide, es como que siempre se estuviese editando y no carga ninguna nueva

    • Obed

      Asegúrate de que no existe ningún error a la hora de cargar el archivo, puedes imprimir un error en pantalla haciendo esto echo mysqli_error($con), eso mostrara en pantalla un mensaje error en el caso de que lo hubiere

      • Dario Coronel

        no hay error al cargar el archivo, lo carga correctamente en la carpeta pero no hace el insert en la base de datos, si eliminas elimina bien, y como te decia siempre te actualiza el 4 registro en la base de datos, probe con lo que me dijiste pero no me acusa error