Getting Started

Shader Carousel, a powerful, responsive, and extremely customizable, versatile slider/carousel with image (.jpg, .jpg, .png, .webp) and video (.mp4) support, 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 slider/carousel is using Three.js and WebGL shaders running exclusively on the device's GPU, the caption is HTML.

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 mettrix 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 from CodeCanyon, inside the main zip file you will find installable plugin fwdsc.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdsc.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 carousel functionality and ads access to the preset from the demos, the gallery manager wich is used to create galleries and add manage items and the CSS editor which is used to update surten CSS aspects of the plugin like the carousel font.

Presets

Frist step is to select the preset that you want to use, you can see them all live in the examples here, 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 and have an explanation, 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 items as you want, it is a simple process.

Shortcode

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

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

You can access the carousel instances by their order in the page with the fwdsc name with its order after it, starting from 0. For example if you have 2 instances their names are fwdsc0 and fwdsc1. 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 fwdscAPI = setInterval(() =>{
	if(window['fwdsc0']){
		console.log('SC API ready')
		clearInterval(fwdscAPI);

		// Register the LIKE event.
		fwdsc0.addEventListener(FWDSC.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 fwdsc0.methodName( /* arguments */ ), please note that fwdsc0 is the carousel instance name, if you are using multiple players don't forget to set the instance unique for each instance like this fwdsc1, fwdsc2, fwdsc3, etc... depending on how many players are added.

destroy

.destroy():Void

Destory the carousel instance and remove it from DOM.

Events

Shader Carousel 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.

FWDSC.ERROR

Dispatched when an error occurs like not beeig able to load a texture.

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.