Registered users
Linkedin Twitter Google+

In order to improve user's experience and to enable some functionalities by tracking the user accross the website, this website uses its own cookies and from third parties, like Google Analytics and other similar activity tracking software. Read the Privacy Policy
33HOPS, IT Consultants Download XSIBackup
33HOPS ::: Proveedores de Soluciones Informáticas :: Madrid :+34 91 930 98 66Avda. Castilla la Mancha, 95 - local posterior - 28700 S.S. de los Reyes - MADRID33HOPS, Sistemas de Informacion y Redes, S.L.Info

Slideshow Carousel:
PHP/ HTML5 Ultra-lightweight Carousel


20160310: added automated image preload (essential feature).

Compact, ultra small footprint, grabs images automatically, only depends on JQuery and PHP, responsive design, text overlay, smooth HTML5 transitions.

I needed an HTML5 carousel for one of my PHP projects, I browsed the Internet and could not find one that would meet my expectations: be low footprint and easy to configure, so I programmed this. To make it work you only need to put some images into the -slides- folder. In case you want to put some text on top of them you can edit these texts, nevertheless take on accound that texts integrated in the images will always look better than those overlayed in HTML.


  • Ultra lightweight, low footprint.
  • Grabs images dinamically.
  • Responsive design.
  • JQuery is the only dependency.
  • Super easy to configure.
  • Overlay texts on top of every photo.
  • Can be easily integrated in your PHP project.

Download Slideshow Carousel

for PHP/ HTML5 projects

  • Simply unzip the file contents to any place in your website folder structure. Add carousel.php as an include to any of your PHP pages:

  • require_once ( realpath(dirname(__FILE__) . 'carousel.php') );

  • Replace the pictures in the slides folder by your own pictures. Make sure that they have at least read permission.
  • Edit the texts in the carousel.php page if you want texts over the photos.
  • Tweak the accompanying .CSS file to meet your design requirements in terms of dimensions, colors, types, etc...
  • Adjust the image time by changing the var: var imgTime = milliseconds;
Slideshow Carousel will automatically grab all the images from the slides folder and iterate through them with a smooth HTML5 transition effect.
This page was last modified on 2017-07-10

Website Map
Resources & help
33HOPS Forum
Index of Docs

©33HOPS site relies on the following technologies and partners:
SSL Protocol PayPal Payment Gateway Stripe Payment Gateway

©33HOPS Sistemas de Información y Redes, S.L. | VAT No: ESB83583716 | Avda. Castilla la Mancha, 95, local posterior, 28701 San Sebastián e los Reyes (Madrid) Spain

Fill in to download
The download link will be sent to your e-mail.

            Read our Privacy Policy

(*) DC & Pro users, please login to your user area to download