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:

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

Latest Tutorials

Popular Tags