Getting Started

Spherical Flow Slider is a powerful, responsive, and highly customizable 3D slider with image (.jpg, .jpeg, .png, .webp) and video (.mp4) support, running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, macOS, and Windows.

It is built using EcmaScript 6 with modern JavaScript and CSS standards. The slider uses Three.js and WebGL shaders running on the device GPU for smooth real‑time rendering.

It is crucial to optimize your images and videos, especially since they are used as textures. Larger image and video files demand more GPU power to display due to the increased number of pixels. To minimize performance impact, select images and videos that are visually close in size to the carousel mesh.

Please note that the metrix are units so visual aproximation is needed, since the carousel runs in 3D space and various aspects like camera position or camera rotation, using pixels is not possible.

Installation

After purchasing the plugin, inside the main zip file you will find the installable plugin spherical-flow-slider.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the spherical-flow-slider.zip plugin file that you downloaded.
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, doing this will not remove any of the settings or galleries, install the new version by following the steps from the installation section above, and if you are using a cache plugin clear the browser cache with it to make sure the old files are not used.

Usage

For simplicity I created a video tutorial.

Presets

First step is to select the preset you want to use. You can preview all presets in the examples here. Select the preset you want, then adjust any options as needed and update the preset.

Galleries

Next step is to create your own slider gallery by clicking the Add new gallery button and giving it a name.

After this is done you can add as many items as you want, it is a simple process.

Shortcode

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

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 fwdsfs name with its order after it, starting from 0. For example, if you have 2 instances their names are fwdsfs0 and fwdsfs1. Here is an example of how to use the API in the WordPress editor or in a code section of your page:

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

		// Register the LIKE event.
		fwdsfs0.addEventListener(FWDSFS.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 fwdsfs0.methodName( /* arguments */ ). Please note that fwdsfs0 is the slider instance name. If you are using multiple sliders, use a unique instance for each one like fwdsfs1, fwdsfs2, fwdsfs3, etc.

destroy

.destroy():Void

Destroy the slider instance and remove it from the DOM.

Events

Spherical Flow Slider events are used via the addEventListener method and accessed via the instance name.

The events must be registered when the API is ready.

FWDSFS.ITEM_UPDATE

Dispatched when the slider item positions are changing.

FWDSFS.ERROR

Dispatched when an error occurs, for example if a texture fails to load.

Notes

Spherical Flow Slider started as a simple idea in the early 2000s: turn imagination into living digital art. With the power of Three.js and the precision of GLSL, that idea became a real‑time canvas—where motion, light, and interaction come alive. It’s more than visuals; it’s a new way to experience design.

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 version, API and overall implementation.