Getting Started

Mirror Media Slider is a powerful, responsive, and highly customizable 3D filmstrip/coverflow slider with image (.jpg, .jpeg, .png, .webp) and video (.mp4) support. It runs smoothly on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, macOS, and Windows.

It is built with ECMAScript 6 and modern JavaScript/CSS. The slider uses Three.js and WebGL shaders that run on the GPU, while captions are standard HTML.

Optimize images and videos whenever possible. Larger assets require more GPU power because they are used as textures. For best performance, use media that is close to the final display size.

Many controls are unitless because the slider runs in 3D space (camera position, rotation, and scale). Use visual approximation to tune your layout.

Installation

After purchasing the plugin from, inside the main zip file you will find the installable plugin fwdmms.zip.

Video tutorial

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdmms.zip plugin file that you downloaded from CodeCanyon.
3. Click on install now.
4. If successful, click Activate Plugin to activate it, or Return to Plugin Installer.

Update

Uninstall and delete the current installed version (this does not remove settings or galleries), then install the new version using the steps above. If you use a cache plugin, clear the cache so the latest files are loaded.

Usage

The plugin has three main areas: the Presets manager (controls slider behavior and styles), the Galleries manager (creates galleries and items), and the CSS Editor (fine-tunes visual styles such as fonts and captions). Use the demo presets as starting points and customize as needed.

Presets

First, pick a preset. You can preview them in the live demos. Select the preset you want, adjust the options, and click Update Preset to save.

Galleries

Next, create a gallery by clicking Add New Gallery and giving it a name.

After that, add items (images, videos, or links). You can manage captions, lightbox settings, and item-specific options per entry.

Shortcode

After the preset and gallery are ready, use the shortcode generator to add the slider to any page, post, or custom post type.

Example shortcode:

[fwdmms preset_name="Preset 1" gallery_name="Gallery 1"]

For WooCommerce, you can paste the shortcode in the product description to replace the default product gallery.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent all the public API methods and event listeners that can be used from the slider externally.

You can access slider instances by their order on the page using the fwdmms name plus the instance index, starting at 0. For example, if you have two instances their names are fwdmms0 and fwdmms1. Here is an example of using the API in the WordPress editor or a custom code section:

<script type="text/javascript">
// API.
let fwdmmsAPI = setInterval(() =>{
	if(window['fwdmms0']){
		console.log('LS API ready')
		clearInterval(fwdmmsAPI);

		// Register the LIKE event.
		fwdmms0.addEventListener(FWDMMS.ERROR, onEerror);
	}
}, 100);


// Listen for the LIKE event.
function onEerror(e){
	console.log(e)
}
</script>

Methods

Methods are functions that can be called via the API to execute certain actions.

JavaScript methods look like fwdmms0.methodName( /* arguments */ ). Note that fwdmms0 is the slider instance name. If you use multiple sliders, reference them as fwdmms1, fwdmms2, fwdmms3, etc.

goToItem

.goToItem(itemId:Number)

Go to a specific item, the couting starts from 0.

destroy

.destroy()

Destroy the instance and removes it from the DOM.

Events

Mirror Media Slider has a single event, it is used via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

FWDMMS.ITEM_UPDATE

Dispatched when the slider item positions are changing.

FWDMMS.ERROR

Dispatched when an error occurs with the slider like not finding the media.

Notes

I've dreamed of bringing this vision to life since I first started developing in the 2000s. For nearly 25 years, this idea has lived in my mind, waiting for the right moment, the right tools, and the right technology. And now, at last, it's possible!

For me this is more than a job, it is my passion, I love to create innovative tools that my clients can benefit from. @Tibi - FWD.

For support and customizations please write to me directly at this email.

WordPress Documentation

Documentation for the WordPress plugin, API, and implementation.