Getting Started

Shader Spiral Carousel, a powerful, responsive, and extremely customizable infinite 3D 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 flip slider is using Three.js and WebGL shaders running exclusively on the device's GPU, the interface like buttons are in is HTML.

It is crucial to optimize your images, especially since they are used as textures. Larger image files demand more GPU power to display due to the increased number of pixels. To minimize performance impact, select images that are visually close in size to the flip slider. After you have the final images use tinypng to reduce the iages size without losing quality, there are other similar tool.

Please note that the mettrix are units so visual aproximation is needed, since the flip slider 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 fwdssc.zip.

Installation steps

1. In your WordPress Admin Dashboard, go to Plugins > Add New.
2. Upload the fwdssc.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 sliders, 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 slider manager wich is used to create sliders 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, there are twelve presets all fo them have default values like the page in the demo page here. don't forget to update the preset.

Galleries

Next step is to create your own slider 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 slider are done use the shortcode generator to add the carousel in your page, post or custom post.

WooCommerce

Just add the shortcode in the product page, it will replace the WooCommerce native gallery.

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 fwdssc name with its order after it, starting from 0. For example if you have 2 instances their names are fwdssc0 and fwdssc1. 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 fwdsscAPI = setInterval(() =>{

	if(window['fwdssc0']){
		console.log('SC API ready')
		clearInterval(fwdsscAPI);

		// Register the LIKE event.
		fwdssc0.addEventListener(FWDSSC.ERROR, onEerror);
		fwdssc0.addEventListener(FWDSSC.ITEM_UPDATE, onItemUpdate);
		
	}
	}, 100);

	// Listen for the LIKE event.
	function onEerror(e){
		console.log(e)
	}

	function onItemUpdate(e){
		console.log(e)
	}	

</script>

Methods

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

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

goToItem

.goToItem(itemId:Number, animate:Boolean, duration: Number, preferShortestDirection: Boolean)

Go to a specific item, the couting starts from 0.

destory

.destory()

Destroy the instance and removes it from the DOM.

Events

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

FWDSSC.ITEM_UPDATE

Dispatched when the slider item postions are changing.

FWDSSC.ERROR

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

Notes

As a developer, I love building with Shader Spiral Carousel (SC). Crafting the curved 3D spiral effect, fine-tuning animations, and customizing every detail—from spacing and colors to smooth motion—makes the process both creative and technical. Bringing media to life with SC is one of those projects where code and design truly meet.

For support and customizations please write to me directly at this email.

WordPress & WooCommerce Documentation