Extension:ImageSlider

**MediaWiki extensions manual**
ImageSlider; Release status: stable
Implementation	Parser function
Description	Adds a lightweight before/after image comparison slider
Author(s)	(Kristbaumtalk)
Latest version	1.1.0 (2026-07-21)
Compatibility policy	Main branch maintains backward compatibility.
MediaWiki	>= 1.39
Database changes	No
	Hooks used ParserFirstCallInit;
Licence	GNU General Public License 3.0 or later
Download	Download master snapshot; GitHub: project page; git repository URL; commit history; ; Note:; No localisation updates are; provided by translatewiki.net. ; README
Example	{{#imageslider:Image1=File:Before.jpg\|Image2=File:After.jpg\|width=800px}}

The ImageSlider extension provides a simple, dependency‑light before/after comparison slider for two images using a parser function.

It supports both vertical (left/right) and horizontal (up/down) reveal modes, is keyboard accessible (ARIA slider, arrow keys, Home/End), touch/mouse friendly, and adds no external libraries.

Based on the FürthWiki implementation by Mark Muzenhardt.

Usage

Basic example:

 {{#imageslider:Image1=File:20250528 SL1 Offiziers Speiseanstalt, Postkarte.jpg|Image2=File:20250528 SL2 Offiziers Speiseanstalt Fürth.jpg|width=900px}}

With horizontal mode:

 {{#imageslider:Image1=File:20250528 SL1 Offiziers Speiseanstalt, Postkarte.jpg|Image2=File:20250528 SL2 Offiziers Speiseanstalt Fürth.jpg|width=900px|orientation=horizontal}}

Parameters (parser function)

Name	Required	Description
Image1	Yes	First (base) image (initially visible side: left or top)
Image2	Yes	Second image revealed by sliding
width	No	Container width in pixels, given as `900px` or plain `900`. Percentages and other units are not supported and fall back to the default. Default: 900px, capped at 4096px
orientation	No	`vertical` (default, divider moves left/right) or `horizontal` (divider moves up/down)

If either file cannot be resolved, an inline error is shown and the page is added to the tracking category.

Installation

Download and place the file(s) in a directory called ImageSlider in your extensions/ folder.
Add the following code at the bottom of your LocalSettings.php file:
```
wfLoadExtension( 'ImageSlider' );
```
Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Tracking category

Pages with parameter or file errors are added to: Category:Pages with ImageSlider errors (message key: imageslider-tracking-category).

Full template

This is a template with image links and captions below the slider for convenience:

<includeonly>
{{#imageslider:Image1={{{Image1|}}}|Image2={{{Image2|}}}|width={{{width|}}}|orientation={{{orientation|vertical}}}}}

<div class="imageslider-captions" style="margin-top:0.4em; font-size:90%; line-height:1.4;">
[[:File:{{PAGENAME:{{{Image1|}}}}}|First image]]: {{{Caption1|}}}

[[:File:{{PAGENAME:{{{Image2|}}}}}|Second image]]: {{{Caption2|}}}
</div>
</includeonly><noinclude>
This template wraps the ImageSlider parser function.

Parameters:
* Image1 / Image2 (required): File titles (include the `File:` prefix)
* width (optional, pixels, default 900px)
* orientation (vertical|horizontal, default vertical)
* Caption1 / Caption2 (optional): Text shown beneath with a link to each file.

Example usage:
<pre>{{ImageSlider
| Image1 = File:20250528 SL1 Offiziers Speiseanstalt, Postkarte.jpg
| Image2 = File:20250528 SL2 Offiziers Speiseanstalt Fürth.jpg
| width = 900px
| orientation = vertical
| Caption1 = Postcard, ca. 1916
| Caption2 = Photo from May 2025
}}</pre>
</noinclude>