Bootstrap Tabbed Slider Carousel with jQuery, PHP & MySQL

Sliders or Carousels are very useful feature in web applications to rotate items. As we have already published tutorials to create bootstrap multiple image slider and bootstrap carousel slider with thumbnails, in this tutorial you will learn how to create dynamic Bootstrap Tabbed Slider with jQuery, PHP and MySQL. Bootstrap Tabbed sliders are very user friendly and informative as it create a larger space for your webpage to display multiple pages on a single page. You can display Tabbed slider in a corner of a webpage to occupy least space or display it on full page. This tutorial explained in easy steps with live demo to create dynamic Bootstrap Tabbed slider and also download source code of live demo.

Also, read:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

So let’s start coding. As we will cover this tutorial with live demo to create Bootstrap Tabbed Slider Carousel with jQuery, PHP & MySQL, so the file structure for this example is following.

• index.php
• slider.php
• carousel-slider.js

Step1: Create MySQL Database Table
As we will create dynamic Tabbed slider, so first we will create MySQL database table tab_slider by using below query.

CREATE TABLE `tab_slider` (
  `id` int(11) NOT NULL,
  `page` varchar(255) NOT NULL,
  `content` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

we will also insert few records into this table to create tabbed slider.

INSERT INTO `tab_slider` 
(`id`, `page`, `content`) VALUES
(1, 'About', ' <img src="img/about.png">\r\n				
<div class="carousel-caption">                   
\r\n                    
<p>About us text</p>\r\n
                </div>'),
(2, 'Projects', '<img src="img/projects.png">\r\n                
<div class="carousel-caption">\r\n 
                   
<p>projects details.</p>\r\n
                </div>'),
(3, 'Portfolio', ' <img src="img/portfolio.png">\r\n                
<div class="carousel-caption">\r\n  
                  
#60;p>portfolio details.</p>\r\n 
               </div>'),
(4, 'Services', ' <img src="img/services.png">\r\n               
 <div class="carousel-caption">\r\n                    
<p>services details.</p>\r\n
                </div>');
 

Step2: Create Dynamic Tabbed Slider HTML

In slider.php, we will create dynamic tabbed slider HTML by getting records from MySQL database table tab_slider.

<?php
include_once("db_connect.php");
$sql = "SELECT id, page, content FROM tab_slider LIMIT 4";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$imageCount = 0;
$buttonHtml = '';		
$sliderHtml = '';	
while( $rows = mysqli_fetch_assoc($resultset)){	
	$activeClass = "";			
	if(!$imageCount) {
		$activeClass = 'active';	
	}		
	// slider html
	$sliderHtml.= "<div class='item ".$activeClass."'>".$rows['content']."</div>";   
	// tab button html
	$buttonHtml.= "<li data-target='#tabSlider' 
data-slide-to='".$imageCount."' class='".$activeClass."'><a href='#'>".$rows['page']."<small></small></a></li>";
	$imageCount++;
}
?>

Step3: Display Dynamic Tabbed Slider

In index.php file, we will display dynamic Tabbed slider by including slider.php and then using Tabbed slider HTML and tab button HTML variables.

<?php include_once("slider.php"); ??>
<div id="tabSlider" class="carousel slide" data-ride="carousel"?>
	<div class="carousel-inner"?>
		<?php echo $sliderHtml; ??>            
	</div?>
	<ul class="nav nav-pills nav-justified"?>
		 <?php echo $buttonHtml; ??>		
	</ul?>
</div?>

Step4: Create Tabbed Slider Functionaloty with jQuery
In carousel-slider.js file, we will implement Tabbed slider functionality with jQuery.

$(document).ready( function() {
    $('#tabSlider').carousel({
    	interval:   4000
	});	
	var clickEvent = false;
	$('#tabSlider').on('click', '.nav a', function() {
			clickEvent = true;
			$('.nav li').removeClass('active');
			$(this).parent().addClass('active');		
	}).on('slid.bs.carousel', function(e) {
		if(!clickEvent) {
			var count = $('.nav').children().length -1;
			var current = $('.nav li.active');
			current.removeClass('active').next().addClass('active');
			var id = parseInt(current.data('slide-to'));
			if(count == id) {
				$('.nav li').first().addClass('active');	
			}
		}
		clickEvent = false;
	});
});

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