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]