Create Bootstrap Multiple Image Slider with jQuery, PHP & MySQL

Slider or Carousel is an important feature of web applications to rotate items. In our previous tutorial you have learned how to create Bootstrap Carousel Slider with Thumbnails using PHP and MySQL and get huge response from our readers. Many of them requested for the tutorial to create Bootstrap multiple image slider to slide multiple images in a slide. So in this tutorial you will learn how to create Bootstrap multiple image slider with jQuery and PHP. The tutorial is explained in easy steps with live demo and link to download source code of live demo.



So let’s start coding. As we will cover this tutorial with live demo to create Bootstrap multiple image slider with jQuery and PHP, so the file structure for this example is following.

• index.php


• multiple-image-slider.js


• style.css

Steps1: Create MySQL Database Table
In this tutorial we will create multiple image Slider by getting images 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 query to insert images 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');


Step2: Include Bootstrap, jQuery and Slider Files
In index.php, we will include Bootstrap, jQuery and Slider JavaScript 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.3.6/css/bootstrap.min.css'>


We will include below files at the end of index.php file before closing body tag.

<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>


Step3: Create Bootstrap Multiple Image Slider HTML
Now we will create multiple image slider HTML in index.php by getting images details from MySQL database table slider.
<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>



Step4: Handle Multiple Image Slider Functionality with jQuery
Now in multiple-image-slider.js, we will handle functionality for multiple image slider to rotate multiple images in a slide.
$('.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));
}
});



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