how to create dynamic image slider in php?

Today, We want to share with you image slider in php.In this post we will show you image slideshow from database php jquery, hear for PHP image slideshow auto we will give you demo and example for implement.In this post, we will learn about Create Dynamic Image Slider using PHP with jQuery with an example.

How to Create Dynamic Image Slider Using PHP and Bootstrap?

How to upload images using PHP and HTML Form?

HTML Form

<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="dsp form-control">
      </div>
      <div class="form-group">
          <label>Big Text</label>
          <input type="text" name="Big" id="Big" value="" class="dsp form-control">
      </div>
      <div class="form-group">
          <label>Small Text</label>
          <input type="text" name="Small" id="Small" value="" class="dsp form-control">
      </div>
      <button id="submit" name="submit" type="Submit" class="btn btn-primary">Upload Image</button>
  </form>

Server Side code in PHP

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/slideshowController.php';
                $slideshowController=new SlideshowController();
                $slideshowController->uploadSlider($imageName,$_POST["Big"],$_POST["Small"]);
            }
            else
            {
                echo "File is not uploaded";
            }
        }
        else
        {
            echo "Please choose Image";
        }
    }
}

slideshowController.php

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

show the images slider using PHP and Bootstrap
index.php

<?php
include_once './manage/slider/slideshowController.php';
$slideshowController= new SlideshowController();
$imagewallpaperlist=$slideshowController->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($imagewallpaperlist)){
        foreach ($imagewallpaperlist 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($imagewallpaperlist)){
        foreach ($imagewallpaperlist as $value) {
            if($a==0){
                echo '<div class="item active">
      <img src="sliderImage/'.$value["profilepicture"].'" alt="...">
      <div class="carousel-caption">'.$value["BigText"].'</div>
    </div>';
                $a++;
            }
            else
            {
                echo '<div class="item">
      <img src="sliderImage/'.$value["profilepicture"].'" alt="...">
      <div class="carousel-caption">'.$value["BigText"].'</div>
    </div>';
                $a++;
            }
        }
    }
    ?>
  </div>

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

used listSlider function in php

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,
  `profilepicture` 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 ;

I hope you get an idea about how to make dynamic carousel in php?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Create Dynamic Image Slider using PHP with jQuery

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *