Wednesday 2 August 2017

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:

  1. 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

    ReplyDelete
  2. i love your tutorials a lot sir,

    ReplyDelete
  3. plz make tutorial on product thumbnail slider in php mysql

    ReplyDelete
  4. Excelente explicação. Parabéns pelo post

    ReplyDelete
  5. Thanks a lot.

    Fezekile from South Africa

    ReplyDelete
  6. hello please i used your code and i got all the images displaying alright but they are not sliding. any help please
    thank you

    ReplyDelete
  7. Hello,

    Thanks for this tuto, but how can I fixe the image heigh ?

    ReplyDelete
  8. I, if the images into the MySQL are with random names Is ok?

    ReplyDelete
  9. Great, this was super helpful

    ReplyDelete
  10. Merci beaucoup c'est extra, excellent travail

    ReplyDelete
  11. Sir how to change the color of the circles?

    ReplyDelete
  12. when I apply with boostrap 4 class"carousel-inner" has not working. how can I do it?

    ReplyDelete
  13. 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.

    ReplyDelete
  14. Super, eres muy bueno, la verdad esto me sirvio muchisimo gracias por el aporte, saludos.

    ReplyDelete
  15. 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

    ReplyDelete
  16. Sir! I need a help regarding this tutorials !!
    How can we insert the image over the carasoul

    ReplyDelete
    Replies
    1. How to insert the image? because the image not showing

      Delete
  17. its code node working when i using bootstraP 4

    ReplyDelete
  18. this code is not working for Bootstrap 5
    how to do is Bootstrap 5 code?

    ReplyDelete