Getting Started

Oval Carousel, a powerful, responsive, and extremely customizable, versatile 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 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 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 installable plugin fwdoc.zip.

Installation steps

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

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 carousel 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 carousel 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 carousel 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 fwdoc name with its order after it, starting from 0. For example if you have 2 instances their names are fwdoc0 and fwdoc1. 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 fwdocAPI = setInterval(() =>{
	if(window['fwdoc0']){
		console.log('OC API ready')
		clearInterval(fwdocAPI);

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

destroy

.destroy():Void

Destory the carousel instance and remove it from DOM.

Events

Oval 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.

FWDOC.ITEM_UPDATE

Dispatched when the carousel item postions are changing.

FWDOC.ERROR

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

Notes

Ever 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 has become a real-time canvas—where motion, light, and interaction come alive. Ever isn’t just 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.