1
2<?php
3//index.php
4$connect = mysqli_connect("localhost", "root", "", "testing");
5function make_query($connect)
6{
7 $query = "SELECT * FROM banner ORDER BY banner_id ASC";
8 $result = mysqli_query($connect, $query);
9 return $result;
10}
11
12function make_slide_indicators($connect)
13{
14 $output = '';
15 $count = 0;
16 $result = make_query($connect);
17 while($row = mysqli_fetch_array($result))
18 {
19 if($count == 0)
20 {
21 $output .= '
22 <li data-target="#dynamic_slide_show" data-slide-to="'.$count.'" class="active"></li>
23 ';
24 }
25 else
26 {
27 $output .= '
28 <li data-target="#dynamic_slide_show" data-slide-to="'.$count.'"></li>
29 ';
30 }
31 $count = $count + 1;
32 }
33 return $output;
34}
35
36function make_slides($connect)
37{
38 $output = '';
39 $count = 0;
40 $result = make_query($connect);
41 while($row = mysqli_fetch_array($result))
42 {
43 if($count == 0)
44 {
45 $output .= '<div class="item active">';
46 }
47 else
48 {
49 $output .= '<div class="item">';
50 }
51 $output .= '
52 <img src="banner/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
53 <div class="carousel-caption">
54 <h3>'.$row["banner_title"].'</h3>
55 </div>
56 </div>
57 ';
58 $count = $count + 1;
59 }
60 return $output;
61}
62
63?>
64<!DOCTYPE html>
65<html>
66 <head>
67 <title>How to Make Dynamic Bootstrap Carousel with PHP</title>
68 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
69 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
70 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
71 </head>
72 <body>
73 <br />
74 <div class="container">
75 <h2 align="center">How to Make Dynamic Bootstrap Carousel with PHP</h2>
76 <br />
77 <div id="dynamic_slide_show" class="carousel slide" data-ride="carousel">
78 <ol class="carousel-indicators">
79 <?php echo make_slide_indicators($connect); ?>
80 </ol>
81
82 <div class="carousel-inner">
83 <?php echo make_slides($connect); ?>
84 </div>
85 <a class="left carousel-control" href="#dynamic_slide_show" data-slide="prev">
86 <span class="glyphicon glyphicon-chevron-left"></span>
87 <span class="sr-only">Previous</span>
88 </a>
89
90 <a class="right carousel-control" href="#dynamic_slide_show" data-slide="next">
91 <span class="glyphicon glyphicon-chevron-right"></span>
92 <span class="sr-only">Next</span>
93 </a>
94
95 </div>
96 </div>
97 </body>
98</html>
99
100