Skip to main content

Creating an Image Slideshow Using PHP and Simple jQuery Tutorial

Screenshot
Body

Hi everyone! This tutorial is about on how to create an images slideshow using PHP and Simple jQuery. This program requires only a few lines of code. The source code file contains only a simple CSS, Images Container/HTML, jQuery Scripts, and PHP script for listing all the images from a directory. The script is easy to understand.

Now, we will be creating a simple web application and our main goal is to display the slideshow in an HTML container and each slide will be shown at every specific time using the fade-in animation. To this, follow the steps below.

Gettting Started

Since we will be using a PHP Language, we will have to use a local web server to tun pur PHP Script such as XAMPP/WAMP. Then, start the Apache.

Step 1: Creating our style to beautify our slideshow

Open your text editor such as Notepad++, Sublime, or etc. and paste the code below and save it as "slideshow.php."

  1. <style>
  2. body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
  3.  
  4. .fadein {
  5. position:relative; height:332px; width:500px; margin:0 auto;
  6. background: #ebebeb;
  7. padding: 10px;
  8. }
  9. .fadein img{
  10. position:absolute;
  11. width: calc(96%);
  12. height: calc(94%);
  13. object-fit: scale-down;
  14. }
  15. </style>

Step 2: Creating and linking our jquery

Copy and Paste the code below after the style tag in the file "slideshow.php".

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2. <script>
  3. $(function(){
  4. $('.fadein img:gt(0)').hide();
  5. setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
  6. });
  7. </script>

Step 3: Creating the div tag where the images display

Copy and paste the code below after the script tag of "slideshow.php". Store your images to show on a folder. In my case, I stored the images in a slider directory.

  1. <div class="fadein">
  2. <?php
  3. // display images from directory
  4. // directory path
  5. $dir = "./slider/";
  6.  
  7. $scan_dir = scandir($dir);
  8. foreach($scan_dir as $img):
  9. if(in_array($img,array('.','..')))
  10. continue;
  11. ?>
  12. <img src="<?php echo $dir.$img ?>" alt="<?php echo $img ?>">
  13. <?php endforeach; ?>
  14. </div>

Here's the Full Source Code

  1. <html lang="en">
  2. <head>
  3. <title>Simplest jQuery Slideshow</title>
  4.  
  5. <style>
  6. body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
  7.  
  8. .fadein {
  9. position:relative; height:332px; width:500px; margin:0 auto;
  10. background: #ebebeb;
  11. padding: 10px;
  12. }
  13. .fadein img{
  14. position:absolute;
  15. width: calc(96%);
  16. height: calc(94%);
  17. object-fit: scale-down;
  18. }
  19. </style>
  20.  
  21. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  22. <script>
  23. $(function(){
  24. $('.fadein img:gt(0)').hide();
  25. setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
  26. });
  27. </script>
  28.  
  29. </head>
  30. <body>
  31. <div class="fadein">
  32. <?php
  33. // display images from directory
  34. // directory path
  35. $dir = "./slider/";
  36.  
  37. $scan_dir = scandir($dir);
  38. foreach($scan_dir as $img):
  39. if(in_array($img,array('.','..')))
  40. continue;
  41. ?>
  42. <img src="<?php echo $dir.$img ?>" alt="<?php echo $img ?>">
  43. <?php endforeach; ?>
  44. </div>
  45. </body>
  46. </html>

DEMO VIDEO

There you go, you've been successfully created your image slideshow with very few lines of code. I hope this simple PHP tutorial will help you with what you are looking for.

I also included the file in this tutorial. You can download the file and run it on your computer.

Enjoy Coding !!

Comments

Submitted byAnonymous (not verified)on Fri, 01/11/2013 - 16:40

Worked perfectly even in drupal
Submitted byAnonymous (not verified)on Wed, 02/13/2013 - 18:13

thanks for providing slideshow code. that's really helpful for me.
Submitted byAnonymous (not verified)on Mon, 05/27/2013 - 07:06

Excellent! Worked beautifully and saved me a lot of time on a tight schedule. :-)
Submitted byAnonymous (not verified)on Fri, 06/07/2013 - 15:39

Hi thanks very much for your tutorial. It works like a charm...however your title "Image Slideshow Using PHP and simple Jquery" is a tad misleading. I might be wrong but I dont seem to see any php code. It is just plain jquery.
Submitted byAndySmithy (not verified)on Sun, 02/23/2014 - 22:51

In reply to by Anonymous (not verified)

Agreed. Works fine on my html pages and rotator would also be more accurate than slider. But not complaining, just adding more keywords so people can find it when looking for html image rotator :-) Nice tight bit of code, thanks.
Submitted byharshil (not verified)on Wed, 08/07/2013 - 17:10

best article
Submitted byNegin (not verified)on Sun, 09/08/2013 - 17:14

i really thank you for this slide show!!!!! little but helpful

c is a gal man.. tell her that "Good Job Sis.. "... ;-) :-P
Submitted byAbibala (not verified)on Tue, 06/24/2014 - 23:07

Wen i am strugglng in php it is very help to me thnx a lot
Submitted byalisha patel (not verified)on Thu, 06/26/2014 - 14:38

I am creating a wordpress slider plugin, and this code helps me. Thanks.
Submitted byGaurav Sharma (not verified)on Wed, 07/09/2014 - 19:50

Thanks Bro Its very helpful
Submitted byle' yin (not verified)on Tue, 07/22/2014 - 13:53

that's so helpful! Thanks for ur share!
Submitted bysepide (not verified)on Mon, 08/04/2014 - 13:22

very very Thanks for share this code:):x
Submitted byargieon Mon, 08/18/2014 - 06:21

Thank you for all the positive comment i receive in this article. I will use this as an inspiration to developed more useful tutorial as much as i can. Thank guys for reading my article
Submitted byIshant (not verified)on Wed, 04/15/2015 - 15:55

it is helpful to build dynamic slideshow
Submitted byPatria Ari (not verified)on Wed, 05/13/2015 - 10:09

its very helpful, thanks
Submitted byMiniMonty (not verified)on Thu, 05/14/2015 - 23:43

Works pretty good - only problem is the images are loading from top left not centre, so if you use images of different sizes they are not centred.
Submitted byEbune (not verified)on Fri, 05/13/2016 - 20:04

Thanks guys the script is the simplest image rotator i have seen but please i have another div tag which i placed absolutely to the image slider div but when the images slide, the div which was placed absolutely on the slider div also slides. Please can anyone help?? Thanks in advance
Submitted bynj (not verified)on Wed, 06/22/2016 - 18:50

thanks but I have 2 questions: first: how can I show it in the left - top corner of the page? second: how can I put "Next" & "previous" buttons?
Submitted bykashifejaz (not verified)on Wed, 07/19/2017 - 07:42

I added the code into php file, but the picture is not changing. when I execute it in a browser it is working. Plz give the solution.

Add new comment