dynamic carousel bootstrap php

Solutions on MaxInterview for dynamic carousel bootstrap php by the best coders in the world

showing results for - "dynamic carousel bootstrap php"
14 Sep 2018
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
source