Seguramente hayas visto miles de sliders o carruseles en Internet, los cuales se utilizan para rotar elementos. Los carruseles son muy populares en los sitios web de comercio electrónico y, especialmente, en la página de inicio, ya que hace que el sitio web sea más fácil de usar y aumenta la experiencia del usuario. Así que si estás pensando en implementar un carrusel en tu proyecto, has llegado al lugar indicado. En este tutorial aprenderás a crear un slider carrusel con miniaturas usando PHP y MySQL.
Habiendo dicho esto, vamos a empezar con el código. En el proyecto vamos a tener la siguiente estructura de archivos con la cual crearemos un slider carrusel con miniaturas en Bootstrap utilizando PHP y MySQL
- index.php
- slider.php
- carousel-slider.php
- style.css
Crea las tablas de la base de datos
En este ejemplo, extraeremos las imágenes de nuestro carrusel slider de una base de datos MySQL. Por lo que, lo primero que tenemos que hacer es crear una tabla en nuestra base de datos la cual vamos a llamar slider.
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
Después, insertaremos 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 Boostrap y los archivos necesarios para el carrusel
En index.php, incluiremos Bootstrap y los archivos que nos harán falta para implementar nuestro slider carrusel. Los insertaremos en el tag head, al comienzo de nuestro archivo index.php.
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <link href="css/style.css" rel="stylesheet">
Ahora, incluiremos estos archivos justo antes del cierre de nuestro </body> en el index.php
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> <script src="js/carousel-slider.js"></script>
Crea el HTML del slider carrusel en Bootstrap
En el index.php, crearemos el HTML de nuestro slider carrusel y también incluiremos slider.php para utilizar el HTML del slider generado desde MySQL.
<div class="container"> <h2>Create Bootstrap Carousel Slider with Thumbnails using PHP & MySQL</h2> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> <ol class="carousel-indicators"> <?php echo $button_html; ?> </ol> <div class="carousel-inner"> <?php echo $slider_html; ?> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> <ul class="thumbnails-carousel clearfix"> <?php echo $thumb_html; ?> </ul> </div> </div>
Crea el slider carrusel con PHP y MySQL
Ahora en slider.php, obtendremos los registros de la tabla MySQL slider y creamos el carrusel dinámico.
<?php
include_once("db_connect.php");
$sql = "SELECT id, image FROM slider LIMIT 4";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$image_count = 0;
$button_html = '';
$slider_html = '';
$thumb_html = '';
while( $rows = mysqli_fetch_assoc($resultset)){
$active_class = "";
if(!$image_count) {
$active_class = 'active';
$image_count = 1;
}
$image_count++;
$thumb_image = "nature_thumb_".$rows['id'].".jpg";
// slider image html
$slider_html.= "<div class='item ".$active_class."'>";
$slider_html.= "<img src='images/".$rows['image']."' alt='1.jpg' class='img-responsive'>";
$slider_html.= "<div class='carousel-caption'></div></div>";
// Thumbnail html
$thumb_html.= "<li><img src='images/".$thumb_image."' alt='$thumb_image'></li>";
// Button html
$button_html.= "<li data-target='#carousel-example-generic' data-slide-to='".$image_count."' class='".$active_class."'></li>";
}
?>
Fuente: phpzag.com