January 23, 2014 3:22 pm

Dynamic image slider using Twitter Bootstrap & PHP with MySQL

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.

Dynamic image slider using twitter bootstrap & PHP with MySQL

Tutorial Directory structure:

phpgang directory strucrure

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

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

Use Bootstrap libraries and define carousel classes.


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

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

Finally we have Controls for navigation for next or previous.


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.


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


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.


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.

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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories:
  • Shahbaz Ahmed Bhatti

    i have Confusion Plz let me know what mean of Boostrap ( or what is Boostrap)

    • huzoorbux

      It is an html, css, javascript framework that you can use as basis for creating a web sites or web applications.

      • Shahbaz Ahmed Bhatti

        Then Please also post some basic tutorial of BoosTrap so i can learn.

        • bilal

          I cant find the image slider responsive. can any one suggest me

  • eko

    Hey I just want to take time and say tank you for this greats tutorial.. its great thing and I been looking for something like this for a very long time. Ones again Thank you and keep up good work.

  • carol

    I’ve tried to download code but it said “no email subscribe” whereas I’ve been subscribed. Could you please tell me how to download the code? thx

  • Rohini Shirole

    thank u sooooooooooooo much….after striving so much ur code worked for me perfectly


    Please Tell me the html.inc file meaning and using purpose.

  • nipender

    verryyyyyy verryy irritating site i am unable to download the slider code after Subscribe the email

  • Mümtaz Temur

    Bitte sagen Sie mir die Datei html.inc Sinn und Zweck verwenden.

  • zemo zemac

    Ok, this is great tutorial. But i want to know how do you target in index.php with a href!
    I want to see every picture individually on the individuall page. Lets say i have display.php and on that page i want to show picture from the slider and some text, how do i wrap link around that line so that it can take me on that page straight to display.php?

  • Bot

    nice t1 guns noob

  • Mcperson


    Help me with this error please.
    In the link to add new image i have the problem

    • huzoorbux

      You can remove that file its used for demo footer and header.

    • huzoorbux

      You can remove that file its used for demo footer and header.

    • harry flamez

      yes u r right… i also have this warning as “html.inc” file is missing from the directory,, plz help??

  • Habil Ahmad Isnaini

    i have error like this.

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in C:xampphtdocsdinamicsliderindex.php on line 6

    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:xampphtdocsdinamicsliderindex.php on line 11

    I have edited the db file and the error still occurs. please help me.. i want to learn about this.
    or can you upload the sql file?


  • Jitendra Kurmi

    i want to rotate through a group of items. For example display four images in one slider at a time and in the second slide again four images.(images fetch from database)

  • ankit

    what is the “include(“../html.inc”);” in addnew.php page.give me answer

  • ankit

    after solving that footer problem..now i dont have option to upload a new imge..it shows a blank page..what should i do???

    • fazal

      i have also getting same error.

      • fazal

        i have solve the error. you have to put all the elements from form to closing form out of php block.


      • fazal

        i have solve the error. you have to put all the elements from form to closing form out of php block.


  • harry flamez

    i have got a notice of failed to open such stream of file –include(“../html.inc”); plz help??

  • mohan

    hi can anyone tell how to limit image per in a lide

  • mohan

    hi can anyone tell how to limit image per in a lide

  • mohan

    hi can anyone tell how to limit image in a slide

  • mohan

    hi can anyone tell how to limit image in a slide

  • Raul Stark

    Hello can anyone helpme, when I run the Demo and I try to upload an image the page addnew.php display the following error. what is this line : include(“../html.inc”); ? shoul I remove it or what must I do ?.

    • huzoorbux

      Remov that no need to use that file.

  • Kevin Uriel Azuara Fonseca

    whats html.inc?

  • Ashish

    Thanx Everything Was perfect in that
    I also want to know if we want to make only text slider ?

    Anybody can help me out

    • You can remove pictures and use only text to make text slider.

  • イラ モレイラ ロドリゴ

    Hi, how to set time to transictions? thanks

    • You can set time of transactions by changing css

      find in the bootstrap.min.css file:

      .carousel-inner > .item {
      position: relative;
      display: none;
      -webkit-transition: 0.6s ease-in-out left;
      -moz-transition: 0.6s ease-in-out left;
      -o-transition: 0.6s ease-in-out left;
      transition: 0.6s ease-in-out left;

      and change 0.6s to the time you want. You also might want to edit time in the function call below:


      at bootstrap.min.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

      Reference: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items

      • イラ モレイラ ロドリゴ


  • Bobby Corpuz

    to solve the error in “include(“../html.inc”)” – you just need to erase the PHP tag then make like the following below

    //put all the codes here with no PHP tag

  • Alex Gole

    Is it possible to display mutliple items by slide instead of just one?

  • Zulfan


  • Hayat Hussain

    sir plz make toturial on how to make dynamic report in php.i want to make a dmc in php from mysql

  • Rylie

    hi sir, what is the addnew.php ? I didn’t seem to find a code under that filename on here so I’m confuse.

  • Sami Kandha

    thanks for the share Sir…and i have a question: what if the image is more than one in each item?, would you show me the script for that? Please…

  • hi huzoor baksh .. aslm very nicely compiled dynamic query thnks for your effort i am stuck with 1 thing though.. i am getting the slider working ..
    below each slider i would liketo have a btn – more -btn button this button should be a href to a page where all the data related to that particular slider id can be fetched from database via $_get method on the next page .. i am stuck howto echo current slider row id in this more button

    i tried to get row [‘id ‘ as title and passed it down without any luck it just gives me single id — this id does not change with the next slider .. your help will be very much appreaciated thaks in advance ]

  • Johann Porcher

    Hello, I would like to download your source for this slide but i cant subscribe with my e-mail. Your system doesnt work. Its possible to display more than one slide ?

  • Raj Siradhana

    thanks for this code