¿Cómo hacer dinámico el Carousel de Bootstrap?

Este es un pequeño ejemplo acerca de cómo crear un slider dinámico con PHP, mostrando información extraída de una base de datos en el Carousel de Bootstrap.


Publicado: Editado: Estado:

Hola, amigos de Politecnia,

Desde que se crearon los sliders, carousel o pases de diapositivas, han ayudado a dar un poco más de atractivo a los sitios web, ya que nos permiten agregar movimiento e incluso utilizar menos espacio en las páginas gracias a que también ayudan a "compactar" la información y mostrar las diapositivas una a una.

En esta ocasión quiero compartir con ustedes un "pequeño" ejemplo acerca de cómo adaptar el carousel de Bootstrap para mostrar información dinámica (extraída de una base de datos). La estructura y requerimientos depende del slider que vayamos a usar, así como la cantidad de código necesario.

Si te pasas por la página Jssor Slider podrás encontrar muchos ejemplos y descargarlos gratuitamente para usarlos en tu web. Al final de la página podrán encontrar los archivos con el código fuente que he compartido. Debo aclarar que no explicaré con mucho detalle partes del código porque lo principal en esto es cómo hacer funcionar el slider y no cómo extraer información de una base de datos con PHP, por ejemplo.

Luego aplicando un poco de estilo, pueden darle su toque personal, sin embargo, en este ejemplo, el resultado final se verá algo así:

Requerimientos

  • Servidor Apache (el código para la funcionalidad del lado del servidor la he hecho con PHP).
  • Framework Bootstrap (bootstrap.min.css y bootstrap.min.js)
  • Framework JQuery (requerido por bootstrap.min.js)
  • Base de datos con la información a mostrar (yo he usado MySQL y en los archivos incluyo la estructura y datos de ejemplo)

Preparando la base de datos

Esta es una base de datos pequeña, con tan solo una tabla con 5 campos. He decidido hacerla sobre los vehículos de Grand Theft Auto V, pues me he quedado con las ganas de jugarlo. La idea es sencilla, en el slider mostraré la foto, el nombre del auto, una descripción, su ID en la base de datos (lo muestro sólo como ejemplo) y quien ha publicado la imagen. A continuación la estructura:

CREATE DATABASE IF NOT EXISTS `bs_slider` DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci;
USE `bs_slider`;
-- --------------------------------------------------------
--
-- Estructura de tabla para la tabla `autosgta`
--
CREATE TABLE IF NOT EXISTS `autosgta` (
  `auto_id` int(11) NOT NULL AUTO_INCREMENT,
  `titulo` varchar(64) COLLATE utf8_spanish_ci NOT NULL,
  `descripcion` text COLLATE utf8_spanish_ci NOT NULL,
  `foto` varchar(24) COLLATE utf8_spanish_ci NOT NULL,
  `autor` varchar(16) COLLATE utf8_spanish_ci NOT NULL,
  PRIMARY KEY (`auto_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=7 ;

Como puedes ver he nombrado la base de datos como bs_slider y la tabla como autosgta. En el caso del campo de la foto, ya habrás notado que la usaré sólo para guardar el nombre de la foto y luego mediante código construiremos la ruta a su ubicación.

Preparando el servidor

En el servidor crearemos dos archivos: uno para el acceso a datos (DBAccess.php) y otro para mostrar la información (index.php).

El código de DBAccess.php es el siguiente:

<?php
    class DBAccess {
        //Configuración para la conexión a la base de datos
        private $Server = "localhost";
        private $UserName = "test_politecnia";
        private $Password = "test_password";
        private $DataBase = "bs_slider";
        
        //Método para obtener los datos que resulten de la ejecución
        //de la consulta proporcionada
        public function GetData($Query) {
            
            @$Cnx = mysql_pconnect($this->Server, $this->UserName, $this->Password);
            
            //Si no se logró establecer la conexión se retorna FALSE
            if (!$Cnx) {
                return FALSE;
            } else {
            //Si no, se retornan los datos obtenidos de la consulta
                $Data = mysql_db_query($this->DataBase, $Query);
                return $Data;
            }
        }
    }
?>

Este es el archivo que se encargará de conectarnos a la base de datos, extraer la información y enviarnosla al index.php. En caso de que no sigas los pasos con los nombres que yo he usado, deberás cambiar los datos correspondientes en cada archivo donde los uso.

Creamos en nuestro directorio público (htdocs o www) un directorio llamado bs-slider y dentro de él 4 directorios más:

Nombre Contenido

Deberías tener una estructura similar a la de esta imagen.

Raíz "/" En la raíz tendremos el index.php y DBAccess.php
css Aquí tendremos la hoja de estilos (framework) de Bootstrap: bootstrap.min.css
js En este directorio guardaremos una copia de archivo Javascript de Bootstrap: bootstrap.min.js y el framework JQuery: jquery-1.11.1.min.js
fonts Aquí guardamos los archivos que usa Bootstrap para los íconos y gráficos SVG: glyphicons-halflings-regular.ttfglyphicons-halflings-regular.svg
img Dentro de este directorio he creado un subdirectorio llamado autos-gta, esto es opcional y sólo es necesario si te gusta el orden en caso de tener imágenes para diferentes propósitos.

Si no has trabajado aún con Bootstrap, dirigete a getbootrstrap.com para conocer la utilidad de cada uno de estos archivos que he mencionado. El código del index.php es el más extenso y lo iremos creando y explicando paso a paso.

Manos a la obra

<!DOCTYPE HTML>
<html>
<head>
    <meta content="text/html; charset=ANSI" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
    <header class="col-md-12">
        <h1>Prueba de uso y adaptaci&oacute;n de Slider de Bootstrap</h1>
    </header>
    <hr />
    <section id="SliderTest_Container" class="col-md-12">
       <!---- INFORMACIÓN DEL SLIDER ------>
    </section>
</div>
</body>
</html>

Sobre esta estructura básica trabajaremos. Es importante que tengamos en cuenta que primero debemos agregar el .js de JQuery antes que el Bootstrap, puesto que éste depende de JQuery para funcionar, enlazamos el .css de Bootstrap y con eso ya estamos casi listos para iniciar. He agregado una etiqueta <section> con identificador #SliderTest_Container que es donde ubicaré la información del slider. El ID sólo es importante si tienes varios sliders y quieres aplicar estilos diferentes a cada uno.

Extrayendo la información de la base de datos

Vamos a sustituir <!-- INFORMACIÓN DEL SLIDER --> por el código siguiente:

<?php
    require_once("DBAccess.php");
    $DBA = new DBAccess();
    $Datos = $DBA->GetData("SELECT * FROM autosgta LIMIT 3");
    if ($Datos == FALSE) {
        echo "Ha ocurrido un error en la conexión. Por favor revise su configuración o la consulta que ha enviado a DBAccess.php";
    } else {
        $Rows = mysql_num_rows($Datos);
        for ($i=0; $i<$Rows; $i++) {
            $Auto = mysql_fetch_array($Datos);
            echo $Auto["auto_id"] . " <br/>";
            echo $Auto["titulo"] . " <br/>";
            echo '<img src="img/autos-gta/' . $Auto["foto"] . '"/>' . '<br/>';
            echo $Auto["descripcion"] . " <br/>";
            echo $Auto["autor"] . "<br/>######################### <br/>";
        }
    }
?>

En este pequeño código lo que hago es obtener la información de la base de datos. La forma en que acceso a los datos es sólo de ejemplo, algo sencillo, seguramente estés usando algún framework y lo único que recibirás en el index es un arreglo (array) con los datos, si es así deberás adaptar este código para que se ajuste a tus necesidades. Ya debes comprender de qué se trata la primera parte del código, lo que nos interesa es lo que está después del else, pues es allí donde formatearemos los datos para ajustarlos al slider.

Nótese que la consulta la he limitado por el momento a 3 registros. En este punto, si nos vamos accedemos a http://localhost/bs-slider veremos algo como esto (la información aparece de forma corrida y sin formato.):

Comprendiendo la estructura del carousel

Ahora procederemos a ver la estructura  básica del carousel de Bootstrap, misma que usaremos para formatear los datos obtenidos y mostrados con PHP en el código anterior:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption">
                INFORMACIÓN DEL SLIDE
            </div>
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                INFORMACIÓN DEL SLIDE
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

En la primer línea donde dice id="carousel-example-generic", podemos cambiar este ID por cualquiera de nuestra elección y es útil hacerlo para cuando necesitemos más de un slider en la misma página, pues recordemos que debe ser un identificador único.Este, cambio, debemos tenerlo en cuenta para las siguientes secciones del código que deberemos cambiar. En mi caso he cambiado el ID por Carousel-AutosGTA.

Luego, en la siguiente sección ( <!-- Indicators --> ) están los indicadores que muestran qué slide o diapositiva es la que se está mostrando actualmente y están contenidos en una etiqueta de lista ordenada <ol>.y cada elemento de lista <li> apunta a un slide en específico data-slide-to="X" donde X es el número de slide, además apuntan hacia el slider que los contiene mediante su ID (data-target="carousel-example-generic"). Si cambiamos el ID de la primera línea este atributo debería quedar, en mi caso, data-target="Carousel-AutosGTA".

Es importante observar y tener en cuenta que en estos elementos hay uno activo y el resto no, esto le indica a Bootstrap cuál es el slide que se mostrará primero y es necesario establecer uno como activo porque de lo contrario el slider no funciona. En un slider stático agregaríamos los elementos uno a uno, pero en este caso debemos escribir uno sólo que se repetirá tantas veces como registros vayamos a mostrar. De modo que también afecta la forma en que debemos escribir el código para lograr esta diferencia en los elementos. 

Luego, tenemos un contenedor para los slides ( <!-- Wrapper for slides --> ), es aquí donde va la imagen y el texto. la información que modificaremos es la que está dentro de cada <div class="item">. Y es importante que veamos que aquí también habrá un elemento active cuya función es la misma que vimos en los indicadores.

<div class="item">
    <img src="..." alt="...">
    <div class="carousel-caption">
        INFORMACIÓN DEL SLIDE
    </div>
</div>

Usando esta plantilla es que formatearemos los datos para que formen parte de los elmentos del slider. En el src de la etiqueta <img> es donde ubicaremos la url de la foto y donde dice INFORMACIÓN DEL SLIDE es donde podemos agregar toda la información que necesitemos mostrar acerca de la imagen.

Finalmente están los controles, estos son los que nos permiten la navegación a través  de los elementos del slide.

Estos quedan iguales a como están y lo único que cambiamos es el href="" donde debemos poner el ID que hayamos escrito para el carousel en la primer línea.

Momento de combinar nuestro código PHP con la estructura del slider

En nuestro index.php trabajaremos el slider dentro del else { } donde haremos unos pequeños cambios, ya a como podemos ver, los indicadores y los elementos del slider no están en el mismo nivel jerárquico dentro del código HTML.

Lo primero que haremos es agregar el contenedor del slider entre el <section> y la etiqueta de apertura de de PHP (<?php). Y el cierre del mismo al final:

<section id="SliderTest_Container" class="col-md-12">
    <div id="Carousel-AutosGTA" class="carousel slide" data-ride="carousel">
        <?php
         .
         .
         .
        ?>
    </div>
</section>

Ahora vamos a mostrar los indicadores. Para ello dejamos la primera (dentro del else { } ) línea igual, que es la que nos permite saber cuántos registros se han obtenido de la base de datos:

$Rows = mysql_num_rows($Datos);

Como vimos anteriormente, sólo debemos establecer un elemento de la lista como activo. Utilizando un ciclo for podremos imiprimir la cantidad exacta de indicadores para la cantidad de registros que hemos obtenido. El primer elemento lo estableceremos como activo y el resto lo dejamos unicamente con su valor de data-slide-to="" establecido con el valor de $i que irá incrementando durante la ejecución del ciclo:

for ($i=0; $i<$Rows; $i++) {
    if ($i == 0) {
        // Si es el primer registro lo mostramos como activo.
    } else {
        // Si no lo mostramos como elemento normal
    }
}

Antes del for y luego del mismo debemos agregar el contenedor de lista ordenada <ol> para los elementos. El código completo de esta primera parte nos quedaría de esta forma:

$Rows = mysql_num_rows($Datos);
echo '<ol class="carousel-indicators">';
for ($i=0; $i<$Rows; $i++) {
    if ($i == 0) {
        echo '<li data-target="#Carousel-AutosGTA" data-slide-to="0" class="active"></li>';
    } else {
        echo '<li data-target="#Carousel-AutosGTA" data-slide-to="' . $i . '"></li>';
    }
}
echo '</ol>';

Si lo has hecho bien, el resultado al abrir el ejemplo produciría algo como esto (en esta captura ya había quitado el límite de 3 en la consulta, a tí te debe aperecer solamente del 0-2):

Ahora procedemos a mostrar los slides. Para ello crearemos otro ciclo for, antes de este agregamos la apertura del contenedor de los elementos <div class="carousel-inner".....> y al final imprimiresmos la etiqueta de cierre.

echo '<div class="carousel-inner" role="listbox">';
for ($i=0; $i<$Rows; $i++) {
    .
    .
    .
}//FOR
echo '</div>';

Dentro del for lo primero que haremos es obtener un arreglo (array) con los datos de cada registro del conjunto de datos $Datos, para ello usamos la función mysql_fetch_array() que nos permite recupera una fila de resultados como un array asociativo, un array numérico o como ambos y recibe como parámetro el resultado obtenido de mysql_query(). Yo he nombrado a mi variable como $Auto, y para acceder a cada campo lo haremos a través de la conbinación $Auto["campo"].

$Auto = mysql_fetch_array($Datos);

Luego debemos imprimir la apertura de los elementos, pero debemos establecer uno como activo. Lo hacemos de la mismo forma como hicimos con los indicadores:

if ($i == 0) {
   echo '<div class="item active">';
} else {
   echo '<div class="item">';
}

Ahora debemos imprimir la información que se mostrará en cada slide. Primero agregarmos la imagen, la URL la obtengo de la concatenación de 'img/autos-gta/' y $Auto["foto"], esto depende de la ruta donde tienes las imágenes y cómo se llame tu campo, lo importante es que logremos mostrar la imagen. Luego de esto abrimos el contenedor del caption (texto que vamos a mostrar) y dentro imprimimos los datos que queremos mostrar. en mi caso tengo una descripcion, und ID, un título o nombre del auto y por quién fue publicado. Finalmente hay que imprimir las etiquetas de cierre para el Caption y para el Item.

echo '<img style="width: 100%;" src="img/autos-gta/' . $Auto["foto"] . '"/>';
echo '<div class="carousel-caption">';
        echo $Auto["descripcion"];
        echo '#: ' . $Auto["auto_id"];
        echo ' | Nombre: ' . $Auto["titulo"];
        echo ' | Publicado por: ' . $Auto["autor"];
echo '</div>';//Caption
echo '</div>';//ITEM

Debo mencionar que dentro del Caption puedes usar cualquier etiqueta HTML como encabezados y párrafos (<h2>, <p>).

El código completo debería verse así:

echo '<div class="carousel-inner" role="listbox">';
for ($i=0; $i<$Rows; $i++) {
    $Auto = mysql_fetch_array($Datos);
    if ($i == 0) {
        echo '<div class="item active">';
    } else {
        echo '<div class="item">';
    }
    echo '<img style="width: 100%;" src="img/autos-gta/' . $Auto["foto"] . '"/>';
    echo '<div class="carousel-caption">';
            echo $Auto["descripcion"];
            echo '#: ' . $Auto["auto_id"];
            echo ' | Nombre: ' . $Auto["titulo"];
            echo ' | Publicado por: ' . $Auto["autor"];
    echo '</div>';//Caption
    echo '</div>';//ITEM
}//FOR
echo '</div>';

Y con esto solo nos queda mostrar los controles de navegación. Estos los debemos agregar después del contenedor de los items y antes del cierre del contenedor principal del slider. Eso es después del cierre de etiqueta de PHP (<?php) en nuestro caso. Como he cambiado el ID del contenedor del slider, el final de este código quedaría de esta forma:

        ?>
        <!-- Controls -->
        <a class="left carousel-control" href="#Carousel-AutosGTA" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#Carousel-AutosGTA" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Con esto ya deberíamos tener el slider funcionando aunque con el estilo básico o predeterminado de Bootstrap.

Bibliografía

Bootstrap | Carousel

Imágenes extraídas de es.gta.wikia.com: Vehículos de Grand Theft Auto V

Ejemplo de mi autoría. (Descargar archivos fuente)

Dar puntos de agradecimiento
Reportar esta publicación

Déjanos tu comentario

Comentarios (8)

Buen día, me sirvió mucho para una página propia, pero hay varias funciones que ya son obsoletas.

Lo estoy intentando para otra página con las funciones recientes de php pero no logro  terminar, ¿podrías ayudarme o asesorarme en eso, por favor?

Saludos desde México.

Hola,

La verdad es que el código PHP que he escrito en este ejemplo fue solamente para efecto de prueba, me centré más en hacer énfasis en la estructura del slider como tal. Pero tú dime en qué necesitas asesoría?, cuál es el inconveniente que estás teniendo?

Saludos y gracias por comentar.

SirOne,buen dia esque tengo un problema con l conexion por que dice que la funcion mysql_db_query es obsoleta, que puedo hacer referente a este caso muchas gracias.

Hola castry al parecer esta obsoleta la funcion podes utilizar MySQLi o PDO_MySQL la consulta mysqli_select_db te recomiendo que revises la version de tu PHP revisa este enlace http://php.net/manual/es/function.mysql-db-query.php

mariogarcia,

el problema que tengo supongo que es por la conexion, la verdad apenas estoy empezando y se me dificulta muchas cosas, si me puedes decir como la hago seria de gran ayuda, e intendado cambiando esa funcion pero luego me aparece que tambien es obsoleta esta funcion mysql_num_rows, la cambio y me aparece este error : mysqli_stmt_num_rows() expects parameter 1 to be mysqli_stmt, object given in y en esa linea tengo esto  $Rows = mysqli_stmt_num_rows($Datos); no se que este fallando si puedes colaborar mchas gracias de antemano.

Que versiòn de PHP y MySQL tienes?

version de PHP es 5.6.20 y MySQL 4.5.1

Hola castry,

Disculpa por no haber contestado antes, he probado nuevamente el código que escribí en esta publicación y funciona. Tengo la versión 5.6 en PHP y una superior a la tuya en MySQL.

SirOne

(Administrador)

Intereses

Café (elixir de dioses), música, programación, diseño, "El lado oscuro de la luna", The Big Bang Theory, iZombie.

Puntos: 174 Votos: 126