Extension:JavascriptSlideshow

**MediaWiki extensions manual**
JavascriptSlideshow; Release status: stable
Implementation	Tag, Parser function
Description	Allows to create a slideshow (using JavaScript) from multiple included div elements
Author(s)	Chris Reigrut,; Yaron Koren,; DaSch,; Alexia E. Smith,; Nick White;
Maintainer(s)	Miraheze, Brent Laabs
Latest version	2.2.0 (2025-03-22)
MediaWiki	1.43+
PHP	8.1+
Database changes	No
	Tags ‎<slideshow>
	Hooks used ParserFirstCallInit;
Licence	GNU General Public License 3.0 or later
Download	Download extension ; Git [?]: Browse repository (GitHub); Gerrit code review; Git commit log; Download source tarball;
	Translate the JavascriptSlideshow extension if it is available at translatewiki.net

Translate this page

The JavaScriptSlideshow extension creates a slideshow that can:

Create a "rotating" slideshow (i.e., one that changes from one picture to another)
Create stop-action animation from multiple images or multiple pieces of text

Installation

Download and move the extracted JavascriptSlideshow folder to your extensions/ directory.
Developers and code contributors should install the extension from Git instead, using:
```
cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/JavascriptSlideshow
```
Add the following code at the bottom of your LocalSettings.php file:
```
wfLoadExtension( 'JavascriptSlideshow' );
```
Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Options / attributes

Name	Description	Default
id	The ID to be given to the div containing the content. This allows you to pre-specify the id for styling purposes. If none is specified, the id will be a randomly generated number starting with 'slideshow_' (e.g., slideshow_12345).
refresh	The time, in milliseconds, between transitions.	1000 milliseconds (one second)
sequence	The sequence in which the content is displayed. It must be one of the following values: forward backward random	forward
transition	How to transition (change) between content. It must be one of the following values: cut: A straight cut from the current content to the new content. fade: A one-second fade between the current and new content. blindDown: The new content "rolls down" over the existing content.	cut
transitiontime	The time, in milliseconds, that transitions take to complete. Increase it to make transitions slower.	400
center	If 'true', center the slideshow (it only works for slideshows of images, not text).

Examples

Tag

<slideshow sequence="random" transition="fade" refresh="1000">
<div>[[File:Tabby cat with blue eyes-3336579.jpg|thumb|300px|Cat with blue eyes.]]</div>
<div>[[File:Cat cute persian cat.jpg|300px|A cat.]]</div>
<div>This slide has no image.

It can have multiple paragraphs.
</div>
<div>[[File:Cute cat (1698598876).jpg|300px|Another cat.]]</div>
</slideshow>

This results in a div (with a randomly generated ID) that randomly changes every 1 second between the three images specified (which happen to be wiki images) and a slide that has no image (to demonstrate that this is possible).

Parser function

{{#slideshow:
<div>Tick</div><div>Tock</div>
|id=bar refresh=1000
}}

would result in a div (with an id of bar) that changed every second between the words Tick and Tock.

Installation

Options / attributes

Examples

Tag

Parser function

See also