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 <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 can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]