Crear carrusel de imágenes con MySQL y BootStrap 4

Crear carrusel de imágenes con MySQL y BootStrap 4. Los Sliders son la nueva tendencia en diseño web, una forma espectacular de transición y animación en las imágenes de su portal web. Sin embargo, este método es eficaz para la captación y enganche del potencial cliente, otra estrategia más para mejorar las ventas en la empresa.

Rotadores y Carruseles populares en internet

Nivo – Este slider es conocido en todo el mundo, cambia la imagen en el móvil tan solo con arrastrarla con el dedo, pudiendo hacer que su sitio web tenga un aspecto profesional, impresionante y elegante.

Wow – Es un carrusel de imágenes usando jQuery con sorprendentes efectos visuales (Rotate, Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, entre otras).

Otros ejemplos de Sliders:

• Skitter.
• Coin.
• FlexSlider.
• jFlow.
• Tiny.
• Easy Slider jQuery.

Usar el Slider con precaución

Si bien, el slider es algo bueno para nuestra página web. Por lo tanto, recordemos que tiene ventajas y desventajas al momento de implementarlo dentro de nuestro sistema. Para varias salen algunas críticas acerca de su uso, veamos:

1. Disminuye la velocidad de la web

Para que un Slider funcione correctamente se necesita cargar la librería jQuery y el propio script del Slider. Logrando con ello perder la velocidad de carga de nuestro sitio web.

2. Tiene problemas de visualización en móviles

EL uso de los móviles va en crecimiento constante. Cada vez más personas utilizan sus móviles para navegar por Internet y buscar información de todo tipo.

3. Baja el posicionamiento SEO

El slider, al tener varias librerías externas y el exceso de peso de los Scripts y las imágenes del Slider tiene un impacto profundo y negativo en el SEO.

¿Qué podemos hacer para evitar esto?

Recordemos, que los slider son usados por los gigantes de comercio electrónico como ser:

a) Amazon.es

b) Ebay.es

c) aliexpress.com

Si observamos, con detalles estos slider son minimalistas, es decir ocupan el mínimo de librerías externas con imágenes optimizadas. Por lo tanto, con el slider optimizado hace que la carga de la web no sea un problema.

Por ende, el impacto negativo y el SEO no llegarían a ser un problema para la web de comercio electrónico.

Recursos que necesitaremos para nuestro slider.

Básicamente, necesitamos los siguientes elementos:

• index.php
• dbconfig.php
• php_carrusel.sql
• Libreria BootStrap

Crear carrusel de imágenes con MySQL y BootStrap 4

A continuación, veremos una serie de procesos para que nuestro slider funcione correctamente.

a) Paso 1: Crear la tabla y la base de datos MySQL

Para crear un carrusel dinámico, necesitaremos primero crear una base de datos MySQL llamado «php_carrusel» con sus dos tablas llamados «carrusel» y «situaciones«. Por lo tanto, creamos la base de datos y ejecutamos las siguientes consultas SQL para obtener las dos tablas con sus respectivos registros.

CREATE TABLE `carrusel` (
  `id` int(11) NOT NULL,
  `nombre` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `imagen` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `titulo_lat` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `texto_lat` text CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `cor_boton` varchar(20) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `texto_boton` varchar(50) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `link_boton` varchar(220) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `orden` int(11) NOT NULL,
  `situacion_id` int(11) NOT NULL,
  `creado` datetime NOT NULL,
  `modificado` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla Carrusel';

-- Volcado de datos para la tabla `carrusel`

INSERT INTO `carrusel` (`id`, `nombre`, `imagen`, `titulo_lat`, `texto_lat`, `cor_boton`, `texto_boton`, `link_boton`, `orden`, `situacion_id`, `creado`, `modificado`) VALUES
(1, 'Slide 1', 'imagen1.jpg', 'Titulo da primera imagen', 'Contenido da primera imagen', 'success', 'Comprar', '#', 1, 1, '2018-12-25 00:00:00', NULL),
(2, 'Slide 2', 'imagen2.jpg', 'Titulo da segunda imagen', 'Contenido da segunda imagen', 'danger', 'Reservar', '#', 2, 1, '2018-12-25 00:00:00', NULL),
(3, 'Slide 3', 'imagen3.jpg', 'Titulo da tercera imagen', 'Contenido da tercera imagen', 'info', 'Visualizar', '#', 3, 1, '2018-12-25 00:00:00', NULL),
(4, 'Slide 4', 'imagen4.jpg', 'Titulo da cuarta imagen', 'Contenido da cuarta imagen', 'warning', 'Detalles', '#', 4, 1, '2018-12-25 00:00:00', NULL);

-- --------------------------------------------------------

CREATE TABLE `situaciones` (
  `id` int(11) NOT NULL,
  `nombre` varchar(120) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
  `creado` datetime NOT NULL,
  `modificado` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla Situaciones';

-- Volcado de datos para la tabla `situaciones`

INSERT INTO `situaciones` (`id`, `nombre`, `creado`, `modificado`) VALUES
(1, 'Activo', '2018-12-25 00:00:00', NULL),
(2, 'Inactivo', '2018-12-25 00:00:00', NULL);

-- Índices para tablas volcadas

ALTER TABLE `carrusel`
  ADD PRIMARY KEY (`id`);

-- Indices de la tabla `situaciones`

ALTER TABLE `situaciones`
  ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT de las tablas volcadas

ALTER TABLE `carrusel`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;


ALTER TABLE `situaciones`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

b) Paso 2: La conexión con MySQL

Nuestro Slider tiene que conectarse a MySQL para obtener las imágenes y textos de cada slider para que sean dinámico, aquí algunos detalles para la conexión.

<?php
include_once "dbconfig.php";
?>

Fichero dbconfig.php
Este archivo es el encargado de realizar la conexión con MySQLi. Les dejare un pequeño ejemplo de conexión.

<?php
$servidor = "localhost";
$usuario = "root";
$senha = "";
$dbname = "php_carrusel";

//Crear conexion con MySQL
$conn = mysqli_connect($servidor, $usuario, $senha, $dbname);

if(!$conn){
    die("Fallo la conexion: " . mysqli_connect_error());
}
?>

c) Paso 3: Crear HTML para nuestro carrusel

Estructura muy importante que será el encargado de mostrar el SLIDER con llamamiento de registros de la base de datos.

<div class="jumbotron">
<div class="row featurette">
  <div class="col-md-6">					
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
              <?php
              $qnt_slide = mysqli_num_rows($resultado_carrusel);
              $cont_marc = 0;
              while($cont_marc < $qnt_slide){
                  echo "<li id='valor-car' data-target='#myCarousel' data-slide-to='$cont_marc'></li>";
                  $cont_marc++;
              }
              ?>
          </ol>
          <div class="carousel-inner">
              <?php
              $cont_slide = 0;
              while( $row_slide = mysqli_fetch_assoc($resultado_carrusel)){
                  $active = "";
                  if($cont_slide == 0){
                      $active = "active";
                  }
                  echo "<div class='carousel-item $active'>";
                  echo "<img class='d-block w-100' src='imagen/".$row_slide['id']."/".$row_slide['imagen']."' alt='".$row_slide['nombre']."'>";
                  echo "</div>";
                  $cont_slide++;
              }
              ?>
          </div>
          <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previo</span>
          </a>
          <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Siguiente</span>
          </a>
      </div>
      
      
  </div>
  
  <div class="col-md-6">
      <?php
      $cont_contenido = 0;
      $resultado_carrusel = mysqli_query($conn, $result_carrusel);
      while($row_slide = mysqli_fetch_assoc($resultado_carrusel)){
          if($cont_contenido == 0){
              $ap_cont = "block";
          }else{
              $ap_cont = "none";
          }
          echo "<div class='imagen".$cont_contenido." contenido' style='display: $ap_cont;'>";
          echo "<h3>".$row_slide['titulo_lat']."</h3>";
          echo "<p>".$row_slide['texto_lat']."</p>";
          echo "<a class='btn btn-".$row_slide['cor_boton']."' href='".$row_slide['link_boton']."' role='button'>".$row_slide['texto_boton']."</a>";
          echo "</div>";
          $cont_contenido++;
      }
      ?>
  </div>
</div>
</div>

d) Paso 4: Declarar las librerías externas

Si bien, nuestro slider obtiene la información de MySQL, también necesita de librerías genéricas como el BootStrap y jQuery.

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> -->

e) Paso 5: crear Funciones Slider con jQuery

Código jQuery para que nuestro script funcione correctamente en el cual podemos controlar el tiempo para pasar al siguiente slider.

<script>
$(document).ready(function () {
    //Duracion del slider
    $('.carousel').carousel({
        interval: 7000
    });
    
    $('#myCarousel').on('slid.bs.carousel', function () {
        //Recuperar el valor de los datos datos de la diapositiva a estando activo
        var numeroSlide = $('#valor-car.active').data('slide-to');
        //$("#msg").html(numeroSlide);
        
        //Ocultar descripcion anterior
        $('.contenido').hide();
        
        //Apresentar o contenido hacer diapositiva
        $('.imagen' + numeroSlide).show();
    });
});			
</script>

f) Paso 6: La consulta para llamar los registros

Códigos PHP en el cual realiza la consulta para mostrar la información de la base de datos a través del ciclo WHILE PHP.

<?php
$result_carrusel = "SELECT * FROM carrusel WHERE situacion_id=1 ORDER BY orden ASC";
$resultado_carrusel = mysqli_query($conn, $result_carrusel);
$cont_slide = 0;
while( $row_slide = mysqli_fetch_assoc($resultado_carrusel)){
	$active = "";
	if($cont_slide == 0){
		$active = "active";
	}
	echo "<div class='carousel-item $active'>";
	echo "<img class='d-block w-100' src='imagen/".$row_slide['id']."/".$row_slide['imagen']."' alt='".$row_slide['nombre']."'>";
	echo "</div>";
	$cont_slide++;
}
?>

g) Paso 7: Resultado final en el navegador

Al tener todo implementado, podemos observar el fichero index.php en el navegador web y poder visualizar el funcionamiento de nuestro SLIDER WEB.

CONCLUSIÓN DEL SISTEMA

• Los slider para usarlo correctamente y obtener sus beneficios tenemos que usarlo de manera inteligente, es decir no tiene que afectar la carga de la web. Por lo tanto, tiene que ser algo simple sin solicitar muchos recursos externos.
• Es recomendado para web de comercio electrónico. Si observamos, los grandes comercios electrónicos apuestan por los SLIDER.

DESCARGA DEL SISTEMA

A continuación, les dejare un paquete completo del slider que estamos implementando en este ejemplo.