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