Getting Started

Shader Slider, a powerful, responsive, and customizable, versatile image and video slider, seamlessly running on all major browsers and mobile devices, including iPhone, iPad, iOS, Android, MAC, and Windows, elevating your website's audio experience to a whole new level.

It is built using EcmaScript6 using the latest JavaScript and CSS standards. The image/video distortion are built with Three.js and WebGL shaders running exclusively on the device's GPU. It is very important to note that each instance will add its own sphere that has to be rendered by the GPU, if you want to add multiple instances the best thing is to add them in separate sections of the page where they are not visible all at the same time this way the GPU will only render the sphere that is visible in the viewport.

Please note that Shader Slider is compatible with any WordPress & WooCommerce theme and it has no dependencies.

Installation

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

Installation steps

1. In your WordPress & WooCommerce Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdss.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 constructed of three sections, the preset manager which is used to modify the player functionality, the gallery manager wich is used to create Galleries and add manage images/videoss and the CSS editor which is used to update surten CSS aspects of the plugin like the player font.

Presets

There are six presets included, all with the same initial settings. They are provided so that you can configure the slider differently for each preset if needed.

Frist step is to select one preset that you want to use, just select the preset that you want and if you want to modify some of the preset functionlity just modify the option/options that you want, they are self explanatory, don't forget to update the preset.

Galleries

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

After this is done you can add as many images/videoss as you want.

Shortcode

After the preset and gallery are done use the shortcode generator to add the player in your page, post or custom post.

WooCommerce

Please look into the WordPress & WooCommerce section to understand how to configure the slider.

Grab the shortcode and add it in the product description.

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 player externally.

You can access the player instances by their order in the page with the fwdss name with its order after it, starting from 0. For example if you have 2 instances their names are fwdss0 and fwdss1. Here is an example how to use the API in the WordPress & WooCommerce editor or in a code section of your page:

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

		// Register the LIKE event.
		fwdss0.addEventListener(FWDSS.TRANSITION_START, onTransitionStart);
	}
	}, 100);


	// Listen for the LIKE event.
	function onTransitionStart(e){
		console.log(e, fwdss0.getCurrentId());
	}
</script>

<!-- Add a button -->
<button onclick="playNextTrack()">Play next video</button>

Methods

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

JavaScript methods look like fwdss0.methodName( /* arguments */ ), please note that fwdss0 is the player instance name, if you are using multiple players don't forget to set the instance unique for each instance like this fwdss1, fwdss2, fwdss3, etc... depending on how many players are added.

play

.getCurrentId()

Get the current item id.

destroy

.destroy():Void

Destory the slider instance and remove it from DOM.

Events

Shader Slider has many events, they are added via the addEventListener method add accessed via the instance name.

The events must be registered when the API is ready.

FWDSS.TRANSITION_START

Dispatched when the slider transition starts.

FWDSS.TRANSITION_COMPLETE

Dispatched when the slider transition is complete.

FWDSS.TEXTURES_LOADED

Dispatched when all textures are loaded.

FWDSS.ERROR

Dispatched when an error occurs, such as being unable to load an image.

Notes

I worked on this plugin for about an year, it was a challange to bring the 3D world and WebGL in a real project, I will continue to improve it and add new features.

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

Documentation for the WordPress & WooCommerce version, API and overall implementation.