Getting Started

Accordion Slider is a powerful, responsive, and highly customizable WebGL slider with image (.jpg, .jpeg, .png, .webp) and video (.mp4) support, running on all major browsers and modern mobile devices including iOS, Android, macOS, and Windows.

It is built using modern ECMAScript standards with Three.js and custom WebGL shaders running on the device GPU. Captions are rendered as HTML so they remain fully styleable and easy to customize.

It is crucial to optimize your images and videos, especially because they are used as textures. Larger media files require more GPU resources due to increased pixel count. For the best performance, use media dimensions that are visually close to the slider mesh size.

Please note that item dimensions are expressed in 3D units. Since the slider runs in 3D space and is influenced by camera position and rotation, pixel-perfect values are not used for mesh sizing.

Installation

After purchasing the plugin, inside the main zip file you will find the installable plugin archive fwdas.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdas.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, 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

The plugin is organized in three sections: the Presets Manager (used to configure behavior and visual effects), the Galleries Manager (used to create galleries and manage items), and the CSS Editor (used to customize plugin styling such as fonts and caption appearance).

Presets

First, select the preset you want to use. You can preview all presets in the live demos. After selecting a preset, adjust any options you need and make sure to click update to save your changes.

Galleries

Next, create your own gallery by clicking the Add new slider button and assigning a name.

After that, add as many items as you want and configure each item media, caption, and optional link settings.

Shortcode

After your preset and gallery are ready, use the shortcode generator to insert the slider into a 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 the slider instances by their order in the page with the fwdas name with its order after it, starting from 0. For example if you have 2 instances their names are fwdas0 and fwdas1. Here is an example how to use the API in the WordPress editor or in a code section of your page:

<script type="text/javascript">

// API.
let fwdasAPI = setInterval(() =>{
	if(window['fwdas0']){

		console.log('FWDAS API ready')
		clearInterval(fwdasAPI);

		// Register an event listener.
		fwdas0.addEventListener(FWDAS.ERROR, onError);
	}
}, 100);


// Listen for errors.
function onError(e){
	console.log(e)
}

</script>

Methods

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

JavaScript methods look like fwdas0.methodName( /* arguments */ ). Here fwdas0 is the slider instance name. If you use multiple instances, each one gets a unique name such as fwdas1, fwdas2, fwdas3, 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

Accordion Slider provides events that can be accessed through the addEventListener method on each instance.

The events must be registered when the API is ready.

FWDAS.ITEM_UPDATE

Dispatched when the slider item positions are changing.

FWDAS.ERROR

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

Notes

I've dreamt 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 version, API and overall implementation.