dynamic carousel bootstrap code example
Example 1: dynamic carousel bootstrap php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing");
function make_query($connect)
{
$query = "SELECT * FROM banner ORDER BY banner_id ASC";
$result = mysqli_query($connect, $query);
return $result;
}
function make_slide_indicators($connect)
{
$output = '';
$count = 0;
$result = make_query($connect);
while($row = mysqli_fetch_array($result))
{
if($count == 0)
{
$output .= '
<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"></li>
';
}
else
{
$output .= '
<li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"></li>
';
}
$count = $count + 1;
}
return $output;
}
function make_slides($connect)
{
$output = '';
$count = 0;
$result = make_query($connect);
while($row = mysqli_fetch_array($result))
{
if($count == 0)
{
$output .= '<div class="item active">';
}
else
{
$output .= '<div class="item">';
}
$output .= '
<img src="banner/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
<div class="carousel-caption">
<h3>'.$row["banner_title"].'</h3>
</div>
</div>
';
$count = $count + 1;
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>How to Make Dynamic Bootstrap Carousel with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h2 align="center">How to Make Dynamic Bootstrap Carousel with PHP</h2>
<br />
<div id="dynamic_slide_show" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php echo make_slide_indicators($connect); ?>
</ol>
<div class="carousel-inner">
<?php echo make_slides($connect); ?>
</div>
<a class="left carousel-control" href="#dynamic_slide_show" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#dynamic_slide_show" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Example 2: how to add bootstrap carousel
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
<div class=" col-md-6 divleft-top">
<p class="text-CSS">
Solutions for the Asphalt Industry </p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
<div class="col-md-6 divleft-top">
<p class="text-CSS">
Solutions for the Asphalt Industry </p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item"
style="background-image: url('https://www.bonfiglioli.com/india/images/Asphalt/image-thumb__38736__slider/istock-466386521.jpeg')">
<div class="col-md-6 divleft-top">
<p class="text-CSS">
Solutions for the Asphalt Industry </p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text-CSS {
font-size: 55px;
color: #003861!important;
padding-top: 240px;
padding-left: 110px;
}
Example 3: dynamically add images to carousel
<------------------------------------ HTML ------------------------------------>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"></div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<------------------------------------ JS ------------------------------------>
$(document).ready(function(){
for(var i=0 ; i< m.length ; i++) {
$('<div class="item"><img src="'+m[i]+'"><div class="carousel-caption"></div> </div>').appendTo('.carousel-inner');
$('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"></li>').appendTo('.carousel-indicators')
}
$('.item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel-example-generic').carousel();
});