Carrusel del imágenes con jQuery, PHP y MySQL

¿Te gustaría Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!

Los sliders o los carruseles son una característica muy importante para rotar elementos en el diseño web. Muchos de vosotros nos habéis solicitado un tutorial sobre cómo crear un carrusel de múltiples imágenes con Bootstrap. Por lo tanto, en este tutorial veremos cómo hacer esto, además con MySQL y PHP. Para ello seguiremos esta estructura de ficheros:

• index.php
• multiple-image-slider.js
• style.css

Crea una base de datos MySQL

En este tutorial crearemos un slider de múltiples imágenes obteniendo su ruta a través de una tabla de nuestra base de datos. Por lo tanto, lo primero que tenemos que hacer es crear la tabla slider e insertar unos cuantos registros.

CREATE TABLE `slider` (
`id` int(11) NOT NULL,
`image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`description` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci

Ahora insertamos unos cuantos registros:

INSERT INTO `slider` (`id`, `image`, `description`, `created`, `modified`) VALUES
(1, 'nature1.jpg', 'Nature1 images', '2017-07-29 00:00:00', '2017-07-29 00:00:00'),
(2, 'nature2.jpg', 'nature 2 images', '2017-07-29 00:00:00', '2017-07-29 00:00:00'),
(3, 'nature3.jpg', 'nature3 images', '2017-07-29 00:00:00', '2017-07-29 00:00:00'),
(4, 'nature4.jpg', 'nature4 images', '2017-07-29 00:00:00', '2017-07-29 00:00:00');

Incluye las librerías de Bootstrap, jQuery y los archivos necesarios para el slider

En el fichero index.php, incluiremos la librería de Bootstrap, la de jQuery y los archivos de Javascript. Recuerda incluir primero la librería de Bootstrap dentro del tag head en el fichero index.php.

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

Y antes del cierre del body en el index.php, incluye las demás librerías.

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src="js/multiple-image-slider.js"></script>

Crea el HTML del carrusel

Ahora crearemos el HTML de nuestro slider en index.php obteniendo las imágenes de nuestra tabla slider de la base de datos.

<div class="col-md-12">
<div class="carousel slide multi-image-slider" id="theCarousel">
<div class="carousel-inner">
<?php
$sqlQuery = "SELECT id, image FROM slider LIMIT 4";
$resultSet = mysqli_query($conn, $sqlQuery);
$setActive = 0;
$sliderHtml = '';
while( $sliderImage = mysqli_fetch_assoc($resultSet)){
$activeClass = "";
if(!$setActive) {
$setActive = 1;
$activeClass = 'active';
}
$sliderHtml.= "<div class='item ".$activeClass."'>";
$sliderHtml.= "<div class='col-xs-4'><a href='".$sliderImage['id']."'>";
$sliderHtml.= "<img src='images/".$sliderImage['image']."' class='img-responsive'>";
$sliderHtml.= "</a></div></div>";
}
echo $sliderHtml;
?>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon 
glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon 
glyphicon-chevron-right"></i></a>
</div>
</div>

Gestiona la funcionalidad del slider con jQuery

Ahora en multiple-image-slider.js, gestionaremos la funcionalidad para el slider de múltiples imagenes para que roten como un carrusel.

$('.multi-image-slider').carousel({
interval: false
});
$('.multi-image-slider .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.