Create Bootstrap Carousel Slider with Thumbnails using PHP & MySQL

You're well aware with the Sliders or Carousels feature in web design which is used to rotate elements. The Carousels are very popular on E-Commerce websites and especially on the home page as it makes website more user friendly and increase user experience. So if you're thinking about implementing Carousel in your project then you're here right place. In this tutorial you will learn how to create Bootstrap Carousel Slider with Thumbnails using PHP and MySQL. The tutorial explained in easy steps with live demo and link to download source code.



So let’s start the coding. We will have following file structure for the example to create Bootstrap Carousel Slider with Thumbnails using PHP & MySQL.

• index.php


• slider.php


• carousel-slider.js


• style.css

Steps1: Create Database Tables
As in this example, we will display image Carousel Slider from MySQL database.. So first we will create MySQL database table slider and insert few records into tables.

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


we will use below quuery to insert records.

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


Steps2: Include Bootstrap and Carousel Slider Files
In index.php, we will include Bootstrap and Carousel Slider plugin files.

We will include below files in head tag at top in 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">


We will include below files before close body tag in 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>




Steps3: Create Bootstrap Carousel Slider HTML
In index.php, we will create Bootstrap Carousel Slider HTML and also include slider.php to use created slider HTML from 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>



Steps4: Create Bootstrap Carousel Slider with PHP & MySQL
Now in slider.php, we will get records from MySQL table slider and create dynamic Bootstrap carousel slider.
<?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>";
}
?>




You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]