Skip to main content

Image Slideshow Using PHP and simple Jquery


Hi everyone,

This tutorial is about on how to create an images slideshow using php and a simple jquery. This program requires only a few lines of code.
to start let's follow the steps below.

Step 1:Creating our style to beautify our slideshow

to create, open your php editor and paste the code bellow and save it as "slideshow.php."

  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: url("slideshow-bg.png") repeat-x scroll left top transparent;
  11. padding: 10px;
  12. }
  13. .fadein img { position:absolute; left:10px; top:10px; }
  14. </style>

Step 2: Creating and linking our jquery

To create, 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".

  1. </head>
  2. <body>
  3. <div class="fadein">
  4. <img src="http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/Picture-91-500x332.png">
  5. <img src="http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hotel-Seville-casa_de_carmona_galeria_mr_1200-500x332.jpg">
  6. <img src="http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jpeg">
  7. <img src="http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20Room-500x332.jpg">
  8. <img src="http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-Hilton-exterior-photo-Downtown-Disney-Resort-Area-Hotels-500x332.jpg">
  9. </div>
  10. </body>
  11. </html>

the summarize code will look like the code below

  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: url("slideshow-bg.png") repeat-x scroll left top transparent;
  11. padding: 10px;
  12. }
  13. .fadein img { position:absolute; left:10px; top:10px; }
  14. </style>
  15.  
  16. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  17. <script>
  18. $(function(){
  19. $('.fadein img:gt(0)').hide();
  20. setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
  21. });
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. <div class="fadein">
  27. <img src="http://chictraveler.wpengine.netdna-cdn.com/wp-content/uploads/2010/09/Picture-91-500x332.png">
  28. <img src="http://sevillespain.info/wp-content/uploads/2012/02/Casa-De-Carmona-Hotel-Seville-casa_de_carmona_galeria_mr_1200-500x332.jpg">
  29. <img src="http://hereelsewhere.com/wp-content/uploads/2012/06/Chambre22-500x332.jpeg">
  30. <img src="http://www.worlddesignhotels.com/wp-content/uploads/407/X%20Ordinary%20Room-500x332.jpg">
  31. <img src="http://armywife101.com/wp-content/uploads/2012/09/DoubleTree-Suites-by-Hilton-exterior-photo-Downtown-Disney-Resort-Area-Hotels-500x332.jpg">
  32. </div>
  33. </body>
  34. </html>

Congratulation, you've been successfully created your image slideshow with a very few lines of code.

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

Hope this code helps you.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

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

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.