Dynamic Product Slider using Bootstrap Carousel with PHP

If you have looking for web tutorial on How to Create Dynamic Product or Image Slider by using PHP then you have come here for right post in which we have discus topic like How to developed dynamic slider by using Twitter Bootstrap Carousel with PHP Script. Usually We have put Image Slider or Product slider on our website home page and in this we have display our online store hot product and from that customer can go to that particular product page. So it this slider make dynamically then on every day we can display different product images in slider on daily basis.

So here we have make this simple web tutorial in which we have create dynamic image slider by using Twitter Bootstrap with PHP script and Mysql database. For implement product slider we have use Bootstrap Carousel plugin, by using this plugin we can easily make simple image slider. But here we want to make image slider dynamically so we have use PHP simple script. In this script it will fetch banner data from Mysql table and make dynamic code as per Bootstrap Carousel. So, If we want to display other images in slider then just we want to change table data and that php script will make slider as data available in table and that will display that particular image in slider.

This is simple script which create Dynamic Image slider by using PHP Mysql with Bootstrap Carousel. In most of the website we can see Image slider is place on home page. So if we can make this slider dynamically then we can easily change image from slider and can display different images in slider every day. This simple tutorial and from this post you can learn how to create bootstrap carousel slider with PHP and Mysql

Source Code


<?php
//index.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>

Database


--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `banner`
--

CREATE TABLE IF NOT EXISTS `banner` (
  `banner_id` int(11) NOT NULL,
  `banner_title` varchar(200) NOT NULL,
  `banner_image` varchar(200) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `banner`
--

INSERT INTO `banner` (`banner_id`, `banner_title`, `banner_image`) VALUES
(1, 'Banner 1', 'banner-1.jpg'),
(2, 'Banner 2', 'banner-2.jpg'),
(3, 'Banner 3', 'banner-3.jpg'),
(4, 'Banner 4', 'banner-4.jpg'),
(5, 'Banner 5', 'banner-5.jpg');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `banner`
--
ALTER TABLE `banner`
  ADD PRIMARY KEY (`banner_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `banner`
--
ALTER TABLE `banner`
  MODIFY `banner_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=6;

23 comments:

Riyaz Shaikh (RIYAZshk)3 August 2017 at 01:07
Sir Thanks a lot for this tutorials , i also need slider that slides of producst and categories form database like an ecommerce web sites have for e.g flipkart, amazon, indiamart.com (best) i need a homepage products and category slider like INDIAMART.com thank you sir
Unknown10 September 2017 at 07:20
i love your tutorials a lot sir,
Humza khan11 December 2017 at 01:34
plz make tutorial on product thumbnail slider in php mysql
Kleber Brito26 December 2017 at 13:26
Excelente explicação. Parabéns pelo post
Unknown30 March 2018 at 23:57
Thanks a lot.

Fezekile from South Africa
Unknown6 May 2018 at 01:58
Thanhyou very much.
Unknown6 June 2018 at 20:08
hello please i used your code and i got all the images displaying alright but they are not sliding. any help please
thank you
Unknown27 June 2018 at 11:59
Hello,

Thanks for this tuto, but how can I fixe the image heigh ?
Unknown19 August 2018 at 13:48
I, if the images into the MySQL are with random names Is ok?
Unknown19 August 2018 at 15:46
Great, this was super helpful
Betahalf28 August 2018 at 14:47
thanks for the code bro
Meriam16 November 2018 at 08:06
Merci beaucoup c'est extra, excellent travail
Unknown12 February 2019 at 17:06
Sir how to change the color of the circles?
Unknown12 March 2019 at 02:33
when I apply with boostrap 4 class"carousel-inner" has not working. how can I do it?
Anonymous29 March 2019 at 04:15
ok
Prasanjit Debnath22 November 2019 at 01:58
thank you. i got the help from you . and you also described each and every line deeply. again lots of love and thanks for you.
Unknown22 December 2019 at 19:44
Super, eres muy bueno, la verdad esto me sirvio muchisimo gracias por el aporte, saludos.
Jean-Pierre143 May 2020 at 03:32
I like that code but i wish to know how to upload file image or video using ajax and how can i upload video that have size more that 5MB
Adish Dahal30 May 2020 at 05:38
Sir! I need a help regarding this tutorials !!
How can we insert the image over the carasoul
KSPSTA Bagalakote30 November 2020 at 05:29
its code node working when i using bootstraP 4
EC13 July 2021 at 18:39
this code is not working for Bootstrap 5
how to do is Bootstrap 5 code?

Webslesson

PHP, Node.js, React.js, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Wednesday, 2 August 2017

Dynamic Product Slider using Bootstrap Carousel with PHP

Source Code

Database

23 comments:

Popular Posts