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.

Also, read:

• Upload Multiple Images using jQuery, PHP & MySQL
• Reduce or Compress Image Size While Uploading in PHP
• Image Upload without Page Refresh with PHP and jQuery
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

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 may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download