How to Create Dynamic Image Slider Using PHP and Bootstrap

How to create dynamic image slider using php and bootstrap this is the topic of our new tutorial and this tutorial is dedicated to the mails which i have received over my email from long time.

I have also created 2 video’s regarding How to create dynamic slider in PHP over youtube. Or you can view the video below.

Part 1

Part 2

You can find more PHP Tutorials Videos at my channel over Youtube. Lets start with the article.

In this article we will create a simple image upload script and a page where we will show the slider using the PHP script. For showing the dynamic image slider i have used the Bootstrap carousel. I will divide this article in 2 parts 1 is for uploading the image using the php and html form and another is for showing the slider. Lets start with the part 1.

How to upload images using PHP and HTML Form

For uploading the image i have created a very simple form with 3 text boxes –

1. File type input for Image
2. Text box input for showing the bold text
3. Text box input for showing the small text

Why we use bold and small text ? It is because many time we want to show some text over the images of the slider. So that i have created the textboxes through which we can achieve the same effect.

<form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>" enctype="multipart/form-data">
              <div class="form-group">
                  <label>Choose Image</label>
                  <input type="file" name="Image" id="Image" value="" class="form-control">
              </div>
              <div class="form-group">
                  <label>Big Text</label>
                  <input type="text" name="Big" id="Big" value="" class="form-control">
              </div>
              <div class="form-group">
                  <label>Small Text</label>
                  <input type="text" name="Small" id="Small" value="" class="form-control">
              </div>
              <button id="submit" name="submit" type="Submit" class="btn btn-primary">Upload Image</button>
          </form>

For uploading the image to the server i have used the PHP upload script on submit click. Below script will just save the image to the server and sends the value to the sliderClass.

if(isset($_POST["submit"])){
    $getImage=  basename($_FILES["Image"]["name"]);
    if($getImage==""){
        echo "Please choose";
    }
    else
    {
        $target="../sliderImage/";
        $ran=time();
        $target=$target.$ran.$getImage;
        $imageName=$ran.$getImage;
        
        if($_FILES["Image"]["type"]=="image/jpg"||$_FILES["Image"]["type"]=="image/jpeg"){
            move_uploaded_file($_FILES["Image"]["tmp_name"], $target);
            if(move_uploaded_file){
                include_once './slider/sliderClass.php';
                $sliderClass=new SliderClass();
                $sliderClass->uploadSlider($imageName,$_POST["Big"],$_POST["Small"]);
            }
            else
            {
                echo "File is not uploaded";
            }
        }
        else
        {
            echo "Please choose Image";
        }
    }
}

sliderClass.php – This class is used for saving the image value to the database and for showing the list of images over the slider. For saving the image name we have used the uploadSlider function which will take 3 parameters Image, Bold text and Small text.

public function uploadSlider($image,$big,$small){
        $insert="Insert into slider (ImageName,BigText,SmallText) values ('$image','$big','$small')";
        $result=$this->query($insert);
        if($result){
            echo "File is uploaded";
        }
        else
        {
            echo "File is not uploaded";
        }
    }

How to show the images slider using PHP and Bootstrap

You can download the whole code at the bottom of the post. Now its the time for setting up the slider to show the images. For this i have used the Bootstrap carousel with the PHP foreach loop for showing all the images in slider. In the below code you will see 2 times we have used the foreach loop. One is for showing the bullets over the slider and another is for showing the images.

<?php
include_once './manage/slider/sliderClass.php';
$sliderClass= new SliderClass();
$sliderList=$sliderClass->listSlider();
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/3.3/examples/carousel/carousel.css" rel="stylesheet">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <?php
    $i=0;
    if(count($sliderList)){
        foreach ($sliderList as $value) {
            if($i==0){
                echo '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>';
                $i++;
            }
            else
            {
                echo '<li data-target="#carousel-example-generic" data-slide-to="0"></li>';
                $i++;
            }
        }
    }
    ?>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
      <?php
    $a=0;
    if(count($sliderList)){
        foreach ($sliderList as $value) {
            if($a==0){
                echo '<div class="item active">
      <img src="sliderImage/'.$value["ImageName"].'" alt="...">
      <div class="carousel-caption">'.$value["BigText"].'</div>
    </div>';
                $a++;
            }
            else
            {
                echo '<div class="item">
      <img src="sliderImage/'.$value["ImageName"].'" alt="...">
      <div class="carousel-caption">'.$value["BigText"].'</div>
    </div>';
                $a++;
            }
        }
    }
    ?>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
    $('.carousel').carousel()
    </script>

For showing the images we have used listSlider function which is written in our sliderClass.

public function listSlider(){
        $select="select * from slider";
        $result=$this->query($select);
        $count=$result->num_rows;
        if($count< 1){
            
        }
        else
        {
            while ($row = $result->fetch_array()) {
                $rows[]=$row;
            }
            return $rows;
        }
    }

Database Table

CREATE TABLE IF NOT EXISTS `slider` (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `ImageName` varchar(250) NOT NULL,
  `BigText` varchar(250) NOT NULL,
  `SmallText` varchar(500) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

In this article you will see that we have completed many questions like –

• How to upload image in PHP
• How to show images dynamically in php
• How to create dynamic slider in php
• How to get images from database and use them in Slider.

Many questions like these are there. Hope we have solved your queries if you have any issue please comment below. If you want to share any doubt or error than please comment below.

You can also watch the video series over this topic at my Youtube Channel. You can also download the whole code regarding the tutorial.

Download the Code here