Summary: simple Markup for an Image Carousel auto-populated from contents of a directory
Version: 2021-12-01
Prerequisites: None - (Browsers need Java Script to move among images, first image displays even without js.)
Status: Active
Maintainer: Kirk Siqveland
Categories: Images, Media, Layout, Markup
Users: (view? / edit)
Discussion: Carousel-Talk?

Questions answered by this recipe

  • Can I add image carousels/slide-shows to my Home-page, or any page for that matter?
  • Can my slide show automatically find every image in a particular directory?
  • Can I use the image names to sort display order and also to set display names?
  • Can I do all this with one line of Markup?

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.


Simple Markup to build an Image Carousel from contents of a directory/folder

I wanted an image Carousel for a home-page, but I wanted it to be easy to update over time with different images.
This Markup identifies a single directory in your Wiki's domain and populates the Slide-Show/Carousel from all the
images in that directory. (.jpg, .jpeg, .png, .gif)
Contents are alpha-numeric sorted for display, and there is even code to allow you to set sort order but not display it:
03_-_Mallorca_Vacation.jpg  would sort as the third image, and be displayed with the title,
"Mallorca Vacation"  on the slide.


Download the file Carousel.zipΔ

Extract the files from

You will need to edit one line in the carousel.php file to identify your pmwiki URL.
The file is commented to make this easy to find.

Then place carousel.php in your cookbook directory.
(On a standard installation something like )

Edit your config.php file:
(Should be in your Wiki local directory something like
Add the following lines:

## Kirk's Image Carousel recipe
 include_once("$FarmD/cookbook/carousel.php")  ;

Add the contents of the carousel.css file to your local.css file:
(usually found at
Copy and paste the contents of the carousel.css file to the bottom of the local.css file

Now you're ready to use the Carousel Markup!


You might want to edit the carousel.php to comment out lines if you don't want the image 3/10 to display in the corner. Likewise, the image title can be displayed on the slide or not...

Obviously if you don't like my next and previous buttons, you would need to edit the css code.


The following strings can be translated in an XLPage:


Make sure you have a folder/directory with the images you want to use.
I keep a directory just for media files, often with subdirectories.
e.g. /pmwiki/media/slideshow3

Then you just need a simple line of Markup in your page with the relative path to that directory.
Relative to your root pmwiki installation (Where the pmwiki.php file sits.)
something like:

(:Carousel /media/slideshow3:)


To do / some day / maybe

  • Add code to automatically rotate slides
  • Add code to automatically embed the css file

If you have future plans or wishes for this recipe.

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also



See discussion at Carousel-Talk?

User notes? : If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.