Creating an Image Slideshow Using PHP and Simple jQuery Tutorial

Submitted by argie on Monday, September 27, 2021 - 11:30.

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 !!
Tags
image slide show
php
PHP scandr()
Image slideshow
PHP Tutorial for Beginners
PHP source code for Practice
css
HTML
Image Carousel

Comments

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

Worked perfectly even in drupal

Submitted by Anonymous (not verified) on Wed, 02/13/2013 - 18:13

thanks for providing slideshow code. that's really helpful for me.

Submitted by Anonymous (not verified) on Mon, 05/27/2013 - 07:06

Excellent! Worked beautifully and saved me a lot of time on a tight schedule. :-)

Submitted by Anonymous (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 by AndySmithy (not verified) on Sun, 02/23/2014 - 22:51

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 by harshil (not verified) on Wed, 08/07/2013 - 17:10

best article

Submitted by Negin (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 by Abibala (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 by alisha patel (not verified) on Thu, 06/26/2014 - 14:38

I am creating a wordpress slider plugin, and this code helps me. Thanks.

Submitted by Gaurav Sharma (not verified) on Wed, 07/09/2014 - 19:50

Thanks Bro Its very helpful

Submitted by le' yin (not verified) on Tue, 07/22/2014 - 13:53

that's so helpful! Thanks for ur share!

Submitted by sepide (not verified) on Mon, 08/04/2014 - 13:22

very very Thanks for share this code:):x

Submitted by argie on 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 by Ishant (not verified) on Wed, 04/15/2015 - 15:55

it is helpful to build dynamic slideshow

Submitted by Patria Ari (not verified) on Wed, 05/13/2015 - 10:09

its very helpful, thanks

Submitted by MiniMonty (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 by Ebune (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 by nj (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 by kashifejaz (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.

It's true you do not need SQL for everything, but this works just fine with SQL as well. I am going to be adding a lot of code to pause the slide show on hover and next and previous links, but this base is just what I was looking for and I thank to the author for this simple code to give me an idea of how to go about a slideshow.

Add new comment

About text formats