I have received many requests from my readers to create image slider with admin where they can edit images and update text, so in this tutorial I am going to show you how to create image slider to get images, title and description from database and slide images. Using Twitter Bootstrap I have created a very simple and easy to understand slider and PHP & MySQL for dynamic option.

Tutorial Directory structure:

Database design and table:
database name => phpgang
table name => images
column names => id, title, desc, image, date
db.sql
Database file run in your MySQL to create database and add data in table.

-- 
-- Table structure for table `images`
-- 

CREATE TABLE `images` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `title` text NOT NULL,
  `desc` text NOT NULL,
  `image` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

-- 
-- Dumping data for table `images`
-- 

INSERT INTO `images` VALUES (1, 'HTML to PDF', 'How to Convert HTML to PDF in PHP with fpdf', '1.png', '2014-01-23 06:53:13');
INSERT INTO `images` VALUES (2, 'Bootstrap Contact Form', 'How to create Contact Form using Bootstrap', '2.png', '2014-01-23 06:53:13');
INSERT INTO `images` VALUES (3, 'Facebook Style Scroll Bar', 'How to create Facebook style scroll bar with jQuery and CSS.', '3.png', '2014-01-23 06:54:40');
INSERT INTO `images` VALUES (4, 'Instagram OAuth', 'How to login with Instagram OAuth using PHP', '4.png', '2014-01-23 06:54:40');
INSERT INTO `images` VALUES (5, 'PDO database connection in PHP', 'How to use PDO database connection in PHP', '5.png', '2014-01-23 06:56:49');
INSERT INTO `images` VALUES (6, 'Tweet on Twitter', 'How to post tweet on Twitter with PHP', '6.png', '2014-01-23 06:56:49');

db.php
Database configuration file edit database name, user and password as per your configuration.

<?php
$connection = mysqli_connect('localhost','phpgang_usr','******','phpgang') or die(mysqli_error($connection));
?>

Use Bootstrap libraries and define carousel classes.

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script>

Indicators

<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

carousel-indicators this class show slide indicator small circles here we show for 2 slides and make sure you define active slide you can select any slide to be active.

Show images slides with titles and description.

Slider content

<div class="carousel-inner">
    <div class="item active">
            <img src="images/img1.png" alt="Image 1">
            <div class="carousel-caption">
              <h3>Image 1</h3>
              <p>Description 1.</p>         
            </div>
          </div>
    <div class="item">
            <img src="images/img2.png" alt="Image 2">
            <div class="carousel-caption">
              <h3>Image 2</h3>
              <p>Description 2.</p>         
            </div>
          </div>

</div>

Here is item used for slide container carousel-caption used for Title and Description.

Finally we have Controls for navigation for next or previous.

Controls

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Above HTML is used to add Controls to go through next or previous.

PHP Code for Dynamic slider:

I have used ( How to Upload Image using jQuery with progress in PHP ) to upload images and add title and description.

1 Extra file added in image processing and make few changes in process upload file.

processupload.php

<?php
ini_set("display_errors",1);
if(isset($_POST))
{
    $Destination = 'images';
    if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))
    {
        die('Something went wrong with Upload!');
    }
    $allowedExts = array("jpg", "jpeg", "gif", "png");

    $RandomNum   = rand(0, 9999999999);

    $ImageName      = str_replace(' ','-',strtolower($_FILES['ImageFile']['name']));
    $ImageType      = $_FILES['ImageFile']['type']; //"image/png", image/jpeg etc.

    $ImageExt = substr($ImageName, strrpos($ImageName, '.'));
    $ImageExt = str_replace('.','',$ImageExt);
    if(!in_array($ImageExt, $allowedExts))
    {
        die('Invalid file format only <b>"jpg", "jpeg", "gif", "png"</b> allowed.');
    }
    $ImageName      = preg_replace("/\.[^.\s]{3,4}$/", "", $ImageName);

    //Create new image name (with random number added).
    $NewImageName = $ImageName.'-'.$RandomNum.'.'.$ImageExt;

    move_uploaded_file($_FILES['ImageFile']['tmp_name'], "$Destination/$NewImageName");
    echo '<form method="post" action="addimage.php">
    <table width="100%" border="0" cellpadding="4" cellspacing="0">
    <tr>
    <td align="center"><img src="images/'.$NewImageName.'"><input type="hidden" value="'.$NewImageName.'" name="image" /></td>
    </tr>
    <tr>
    <td align="center">Title:<br><input type="text" name="title" /></td>
    </tr>
    <tr>
    <td align="center">Description:<br><textarea name="desc"></textarea></td>
    </tr>
    <tr>
    <td align="center"><input type="submit" name="submit" value="Save" /></td>
    </tr>
    </table></form>';
}
?>

After upload it shows you title and description boxes and submit that to addimage.php file to add in database.

addimage.php

<?php
include_once('db.php');

$image = mysqli_real_escape_string($connection,$_POST['image']);
$title = mysqli_real_escape_string($connection,$_POST['title']);
$desc = mysqli_real_escape_string($connection,$_POST['desc']);

$query  = "INSERT INTO `images`(`title`,`desc`,`image`) VALUES ('".$title."', '".$desc."', '".$image."')";
mysqli_query($connection,$query);

header("location: index.php");
?>

This file used to add data in database table images and redirect to slider page.

Image slider main file which is used to show slides.

index.php

Contains PHP code which get last inserted 6 images from database with title and description and arrange them in carousel slider settings and show you slider.

<?php
include_once('db.php');

$query  = "select * from images order by id desc limit 6";
$res    = mysqli_query($connection,$query);
$count  =   mysqli_num_rows($res);
$slides='';
$Indicators='';
$counter=0;

    while($row=mysqli_fetch_array($res))
    {

        $title = $row['title'];
        $desc = $row['desc'];
        $image = $row['image'];
        if($counter == 0)
        {
            $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'" class="active"></li>';
            $slides .= '<div class="item active">
            <img src="images/'.$image.'" alt="'.$title.'" />
            <div class="carousel-caption">
              <h3>'.$title.'</h3>
              <p>'.$desc.'.</p>         
            </div>
          </div>';

        }
        else
        {
            $Indicators .='<li data-target="#carousel-example-generic" data-slide-to="'.$counter.'"></li>';
            $slides .= '<div class="item">
            <img src="images/'.$image.'" alt="'.$title.'" />
            <div class="carousel-caption">
              <h3>'.$title.'</h3>
              <p>'.$desc.'.</p>         
            </div>
          </div>';
        }
        $counter++;
    }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Dynamic image slider using twitter bootstrap & PHP with MySQL | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">

      img {border-width: 0}
      * {font-family:'Lucida Grande', sans-serif;}
    </style>
  </head>
  <body>
    <h2>Dynamic image slider using twitter bootstrap & PHP with MySQL Example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
<style> 

    .carousel-caption {
      background-image: url("https://www.phpgang.com/wp-content/themes/PHPGang_v2/img/bg_sidebar.png");
    }
    .carousel-inner>.item>img, .carousel-inner>.item>a>img
    {
        height:400px;
        width:700px;
    }

</style> 
<div class="container" style="width: 730px;">
      <h2>Dynamic Image Slider</h2><span style="float: right;margin-top: -30px;"><a href="addnew.php">Add More Images</a></span>
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
         <?php echo $Indicators; ?>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
        <?php echo $slides; ?>  
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>
    </div>
  </body>
</html>

That’s all

You can easily update images and show them in slider helpful for beginner web developers and web designers.

Hope you like this tutorial please must submit your feedback in comments.