Getting Started

Filmstrip Slider is a powerful, responsive, and highly customizable 3D WebGL slider for WordPress and WooCommerce. It supports image and video-based galleries, optional lightbox playback, and smooth cinematic interactions across desktop and mobile.

For the full filmstrip experience, use enough meshes/items (recommended: 7 or more).

It is built with modern JavaScript and CSS. The slider uses Three.js and WebGL shaders on the GPU, while controls and UI elements are rendered in HTML.

It is crucial to optimize your images because they are used as GPU textures. To minimize performance impact, use images close to the final display size and compress them with tools like tinypng.

Please note that many visual settings are in 3D units, not pixels, so practical visual tuning is expected for values like mesh size, camera offset, and curve behavior.

Installation

After purchasing the plugin, locate the installable WordPress plugin zip package included in the download.

Installation steps

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

Update

To update manually, replace the plugin with the new version. Existing presets, galleries, and settings are preserved. If you use caching, clear site and browser caches after update.

Usage

The plugin has three main admin areas: Presets Manager (slider behavior and visual settings), Galleries Manager (create galleries and items), and CSS Editor (custom style overrides).

Presets

First, choose the preset you want to use and adjust its settings (layout, curve, post-processing, lightbox options). Save the preset after changes.

Galleries

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

After that, add as many items as needed and configure each item action (none, link, or lightbox).

Shortcode

After the preset and gallery are ready, use the shortcode generator to insert the slider in a page, post, product, or custom post type.

WooCommerce

Add the shortcode in a product description to render Filmstrip Slider for that product. The plugin can replace WooCommerce's native product gallery when configured to do so.

API - Application Programming Interface

This section is for developers that want to use the plugin API. The following lists represent the public API methods and event listeners available from slider instances.

You can access instances by their configured name (for example fwdfs0). If you use multiple sliders, each should have a unique instance name like fwdfs1, fwdfs2, etc.

<script type="text/javascript">

	// API.
	let fwdfsAPI = setInterval(() =>{
	if(window['fwdfs0']){
		console.log('FWDFS API ready')
		clearInterval(fwdfsAPI);

		// Register the ITEM_UPDATE event.
		fwdfs0.addEventListener(FWDFS.ITEM_UPDATE, onItemUpdate);
	}
	}, 100);


	// Listen for ITEM_UPDATE.
	function onItemUpdate(e){
		console.log(e)
	}
		
</script>

Methods

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

JavaScript methods look like fwdfs0.methodName( /* arguments */ ). If you use multiple sliders, each instance should have a unique name.

goToItem

.goToItem(itemId:Number)

Go to a specific item by index (index starts from 0).

destroy

.destroy()

Destroy the instance and remove it from the DOM.

Events

Filmstrip Slider events are used via the addEventListener method called on the slider instance.

The events must be registered when the API is ready.

FWDFS.ITEM_UPDATE

Dispatched when the active item changes.

FWDFS.RL_SHOW_START

Dispatched when the lightbox starts showing.

FWDFS.RL_HIDE_COMPLETE

Dispatched when the lightbox hide transition is complete.

FWDFS.ERROR

Dispatched when an error occurs (for example missing media/data).

Notes

Filmstrip Slider was designed as a modern, production-ready media solution that balances visual quality, flexibility, and performance across WordPress and WooCommerce projects.

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 & WooCommerce Documentation