Getting Started

Circular 3D 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 spiral/carousel is using Three.js and WebGL shaders running exclusively on the device's GPU, the caption is HTML.

Please note that it will not work locally, it has to run on an HTTP or HTTPS protocol.

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

The demo presetes are all included in the build folder.

Choose one of the preset HTML files from the build folder and open it in a text editor as a refference.

In the download files inside the build folder you will find the src folder that contains the JavaScript code and content folder that contains the CSS file and other important files like the vector font, the content folder has to be uploaded on the server where the carousel is used.

Include the carousel CSS file and JavaScript in the header:

<head>

<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./src/FWDC3DC.js"></script>
<!-- ... -->	

</head>

The next step is to add the initialize code in the page header or footer after the inclusion of the carousel JavaScript and CSS files.

<script type="text/javascript">
	if(document.readyState == 'complete'){
		setupC3DC();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupC3DC();
		});
	}

    function setupC3DC(){
		
		new FWDC3DC({
                
			// Main settings.  
            instance: 'fwdc3Dc0',
            parentId: 'myDiv',
            displayType: 'responsive',
            gridDataId: 'carouselData',
            initializeWhenVisible: 'no',
            paralax: 'yes',
            maxWidth: 1920,
            maxHeight: 1000,
            autoScale: 'yes',
            stopScrollingForPx: 0,
            stats: 'yes',
            gui: 'yes',
            showPreloader: 'yes',
            preloaderColor: '#111111',
            backgroundColor: '#ffffff',
            infinite: 'yes',
            showMaskGradient: 'no',
            useCaption: 'yes',
            captionBackgroundColor: 'yes',
            blackAndWhiteFadeDistance: 1.5,
            planeSize: 2.2,
            planeGap: 1.8,
            scrollSpeedStrength: 0.5,
            scrollDragDirection: 0.2,
            mouseFollowEasingStrength: 0.3,
            centerMeshScaleStrength: 0.3,
            centerMeshClearAngleStrength: 0.43,
            horizontalX: 0,
            horizontalY: 1.8,
            horizontalZ: -4,
            horizontalRotationX: .15,
            horizontalRotationY: 0,
            horizontalRotationZ: 0,
            noiseAmplitude: 0,
            noiseFrequency: 0,
            noiseSpeed: 0.6,

            // Post-Processing.
            antialias: 'yes',

            fluid: 'no',
            fluidPassMainText: 'C3DC',
            fluidPassSubText: 'Hold to start experience',

            mouseRippleStrength: 0,
            uwaveFrequency: 0.1,
            waveAmplitude: 0.02,

            rgbShiftStrength: 0,

            glitch: 'no',

            buldgeType: 'no',
            buldgeRGBStrength: 'in',
            buldgeFixed: 'yes',
            buldgeStrength: 1.3,
           
            grid: 'no',
            gridAddRGBDistortion: 'yes',
            gridSize: 400,
            gridMouseRadiusFactor: 0.2,
            gridMouseStrengthFactor: 0.48,
            gridMouseRelaxation: 0.9,
            
            afterImage: 'no',
            afterImageDumping: 0.75,

		});
		
	}
</script>

The last step adding the carousel is to create a div with an unique ID that will act as the parent/holder for the carousel and set the parentId option to point to the div id ex: parentId: 'myDiv', this div can be added anywhere in your page.

<!-- Carousel holder. --> 
<div id="myDiv"></div>

To add multiple carousels just redo the steps explained above and make sure to change the instance to fwdc3Dc1, fwdc3Dc2, fwdc3Dc3, etc... depending on how many carousels are added, also change the parentId to a different ID and if you want add a different carousel by also change the gridDataId to point to a different carousel.

Please read the settings section to understand the carousel configuration options.

Setup categories & items

A carousel is created by adding in the page inside the body a div with an unique ID and setting the display style to none, this will be used only as the carousel data markup, This unique ID has to be added as the value of the gridDataId option in the carousel settings like this gridDataId: 'carouselData'.

The carousel markup supports categories as showed belowe, if you don't want categories just create one category and leave it's label emtpy.

<!-- Circular 3D Carousel. -->
<div id="carouselData" style="display: none;">

        <div data-cat="Category 1" data-offset-y="0">

            <div data-src="media/flowers/1.mp4" data-width="960" data-height="540" data-url="https://templatemonster.com" data-target="_self">
                <div data-caption="">
                    <p class="fwdc3Dc caption-title"><span>Circular 3D Carousel</p>
                </div>
            </div> 

            <div data-src="media/flowers/1.jpg" data-width="1080" data-height="720" data-url="https://templatemonster.com" data-target="_self">
                <div data-caption="">
                    <p class="fwdc3Dc caption-title">Post-Processing</p>
                </div>
            </div>

            <div data-src="media/flowers/2.jpg" data-width="1080" data-height="720" data-url="https://templatemonster.com" data-target="_self">
                <div data-caption="">
                    <p class="fwdc3Dc caption-title">Paralax</p>
                </div>
            </div>
            
        </div>

        <div data-cat="Category 2" data-offset-y="0.2">

            <div data-src="media/animals/1.mp4" data-width="960" data-height="540" data-url="https://templatemonster.com" data-target="_self">
                <div data-caption="">
                    <p class="fwdc3Dc caption-title"><span>Circular 3D Carousel</p>
                </div>
            </div> 

            <div data-src="media/animals/1.jpg" data-width="1080" data-height="720" data-url="https://templatemonster.com" data-target="_self">
                <div data-caption="">
                    <p class="fwdc3Dc caption-title">Post-Processing</p>
                </div>
            </div>

        </div>

		/* Add more here if you want to add more categories, 
		just copy the div data-cat and change the category
		name and offset-y value. */

    </div>

Adding carousel items is done by adding inside the carousel div one or more div's with data paremeters expplained below.

Category parameters

data-cat - the category name.
data-offset-y - the category offset y in units for the items category, this can be negative as well.

Carousel item parameters

data-src - required media path (.jpg, .jpeg, .png, .webp) or video (.mp4)
data-width - video or image width in px.
data-height - video or image height in px.
data-url - The URL page to open when the mehs is clicked.
data-target - The URL page to open target, _self or _self.

Carousel item caption

An optional caption can be added, the CSS formating is added in the global.css file.

<div data-src="media/images/1.png" data-width="900" data-height="600" data-url="https://templatemonster.com" data-target="_self">
	<div data-caption="">
		<p class="fwdc3Dc caption">Cute Bunny</p>
	</div>
</div>

Modify code

OG is using VITE to build the built final Javascript file.

Settings

Circular 3D Carousel has many options that allows to customize it's features. They are added directly in the carousel constructor as it can be seen in the installation section.

Example

<script type="text/javascript">
	if(document.readyState == 'complete'){
		setupLS();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupLS();
		});
	}

    function setupLS(){
		new FWDC3DC({ 

			// Main settings.  
			instance: 'fwdc3Dc0',
			displayType: 'responsive',
			parentId: 'myDiv',
			gridDataId: 'carouselData',
			initializeWhenVisible: 'yes',
			etc...
			
		})
	}
</script>

instance

Type: (String) - default: fwdc3Dc0

The carousel instance name, this is used to call the API. In the examples files the instance name is set to fwdc3Dc0, if you are using multiple carousels instances just change the instance to fwdc3Dc1, fwdc3Dc2, fwdc3Dc3, etc...

parentId

Type: (String) - default: unset

The carousel holder/div ID, please make sure that this has an unique ID, it can be added anywhere in your page.

displayType

Type: (String) - default: responsive

The carousel display type can be either responsive, which will automatically resize the carousel based on the maxWidth and maxHeight settings, or afterParent, which will resize the carousel based on its parent element’s width and height.

gridDataId

Type: (String) - default: unset

The carousel data div ID, please read the carousel section for more info.

initializeWhenVisible

Type: (String) - default: yes

This can be yes or no, lazy scrolling / loading, the posibility to initialize OG on scroll when the product is visible in the page, this way for example if the product is in a section of a page that is not visible it will not be initialized, instead OG will be initalized only when the user is scrolling to that section in which OG is added.

maxWidth

Type: (Number) - default: 1920

The carousel maximum width in px.

maxHeight

Type: (Number) - default: 800

The carousel maximum height in px.

stopScrollingForPx

Type: (Number) - default: 620

Adds artificial scrolling (in pixels) to keep the carousel visible in the viewport for a longer duration.

autoScale

Type: (String) - default: yes

This can be yes or no and applies if the displayType is reponsive. If set to yes this carousel height will always be proportional to the carousel width, if set to no the height will be fixed based on the maxHeight property.

paralax

Type: (String) - default: no

This can be yes or no ads parallax vertical scrolling.

stats

Type: (String) - default: yes

This can be yes or no, show the stats, FSP/memory usage.

gui

Type: (String) - default: yes

This can be yes or no, show the GUI live settings.

showPreloader

Type: (String) - default: yes

This can be yes or no, show the preloader.

preloaderColor

Type: (String) - default: #FFFFFF

The preloader color in HEX or RGB.

backgroundColor

Type: (String) - default: #000000

The main background color in HEX or RGB.

infinite

Type: (String) - default: yes

This can be yes or no, Enables infinite when an item is clicked; otherwise, if the clicked item has an associated URL, it will open that page — or do nothing if no URL is present.

itemWidth

Type: (Number) - default: 2.6

The item width in uints.

itemHeight

Type: (Number) - default: 1.65

The item height in uints.

minItemScaleX

Type: (Number) - default: 0.1

The item min scale in uints.

maxItemScaleX

Type: (Number) - default: 1

The item max scale in uints.

minItemScaleY

Type: (Number) - default: 1

The item min scale in uints.

minimizedGap

Type: (Number) - default: 1

The item minimized gap between items in uints.

infinitedGap

Type: (Number) - default: 1

The item maximied gap between items in uints.

showMaskGradient

Type: (String) - default: yes

This can be yes or no, show a top and bottom gradient overlay.

useCaption

Type: (String) - default: yes

This can be yes or no, set this to no if you don't want to use a caption.

captionBackgroundColor

Type: (String) - default: yes

This can be yes or no, sets all meshes/items except the center/focus one to black and white.

blackAndWhiteFadeDistance

Type: (Number) - default: 1.5

Pushes the categories text further from the mehes.

planeSize

Type: (Number) - default: 2.2

The item mesh width in units.

planeGap

Type: (Number) - default: 1.8

The item mesh height in units

scrollSpeedStrength

Type: (Number) - default: 0.5

The scroll/drag speed factor.

mouseFollowEasingStrength

Type: (Number) - default: 0.3

This will move the camera based on the mouse movement.

centerMeshScaleStrength

Type: (Number) - default: 0.3

The center mesh scale when infinited.

centerMeshClearAngleStrength

Type: (Number) - default: 0.43

This is the gap between the center item and the rest of the items when infinited.

horizontalX

Type: (Number) - default: 0

Camera items x postion.

horizontalY

Type: (Number) - default: 0

Camera items y postion.

horizontalZ

Type: (Number) - default: 1.3

Camera items z postion.

horizontalRotationX

Type: (Number) - default: 0

Camera items x rotation.

horizontalRotationY

Type: (Number) - default: 0

Camera items y rotation.

horizontalRotationZ

Type: (Number) - default: 0

Camera items z rotation.

noiseAmplitude

Type: (Number) - default: 0

The item noise amplitude.

noiseFrequency

Type: (Number) - default: 0

The item noise frequency.

noiseSpeed

Type: (Number) - default: 0.6

The item noise speed.

antialias

Type: (String) - default: yes

This can be yes or no It uses an anti-aliasing algorithm to enhance visual quality at a small performance cost.

fluid

Type: (String) - default: no

This can be yes or no Ads fulid post-processing effect.

fluidPassMainText

Type: (String) - default: LINEAR SLIDER

Fluid post-porcessing main text.

fluidPassSubText

Type: (String) - default: Hold to start experience

Fluid post-porcessing sub text.

uwaveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

rgbShiftStrength

Type: (Number) - default: 0

Wave RGB color shift.

mouseRippleStrength

Type: (Number) - default: 0.6

Ripple mouse strength.

glitch

Type: (String) - default: no

This can be yes or no, enable glitch post-processing effect.

grid

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing effect.

gridAddRGBDistortion

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing RGB shigt effect.

gridSize

Type: (Number) - default: 400

The grid post-processing grid size.

gridMouseRadiusFactor

Type: (Number) - default: 0.2

The grid post-processing grid radius size.

gridMouseStrengthFactor

Type: (Number) - default: 0.48

The grid post-processing grid strength factor.

gridMouseRelaxation

Type: (Number) - default: 0.9

The grid post-processing grid relaxation factor.

afterImage

Type: (String) - default: no

This can be yes or no, enable after-image post-porcessing effect.

afterImageDumping

Type: (Number) - default: 0.75

The after-image post-processing strength factor.

Methods

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

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

goToItem

.goToItem(itemId:Number)

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

destory

.destory()

Destroy the instance and removes it from the DOM.

Events

Circular 3D Carousel 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.

// API.
let fwdc3DcAPI = setInterval(() =>{
if(window['fwdc3Dc0']){
	console.log('OG API ready')
	clearInterval(fwdc3DcAPI);

	// Register the LIKE event.
	fwdc3Dc0.addEventListener(FWDC3DC.ERROR, onEerror);
}
}, 100);


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

FWDSIS.ITEM_UPDATE

Dispatched when the carousel item postions are changing.

FWDSIS.ERROR

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

Notes

Ever since I typed my first lines of code in the early 2000s, I’ve been driven by one dream: to transform imagination into vivid, living digital art. Today, with the limitless possibilities of Three.js and the magic of GLSL, that dream bursts into life—ushering in a new era of creative wonder.

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.

JavaScript Documentation

Documentation for the JavaScript version, API and overall JavaScript implementation.

Getting Started

Installation

Setup categories & items

Category parameters

Carousel item parameters

Carousel item caption

Modify code

Settings

Example

instance

parentId

displayType

gridDataId

initializeWhenVisible

maxWidth

maxHeight

stopScrollingForPx

autoScale

paralax

stats

gui

showPreloader

preloaderColor

backgroundColor

infinite

itemWidth

itemHeight

minItemScaleX

maxItemScaleX

minItemScaleY

minimizedGap

infinitedGap

showMaskGradient

useCaption

captionBackgroundColor

blackAndWhiteFadeDistance

planeSize

planeGap

scrollSpeedStrength

mouseFollowEasingStrength

centerMeshScaleStrength

centerMeshClearAngleStrength

horizontalX

horizontalY

horizontalZ

horizontalRotationX

horizontalRotationY

horizontalRotationZ

noiseAmplitude

noiseFrequency

noiseSpeed

antialias

fluid

fluidPassMainText

fluidPassSubText

uwaveFrequency

waveAmplitude

rgbShiftStrength

mouseRippleStrength

glitch

grid

gridAddRGBDistortion

gridSize

gridMouseRadiusFactor

gridMouseStrengthFactor

gridMouseRelaxation

afterImage

afterImageDumping

Methods

goToItem

destory

Events

FWDSIS.ITEM_UPDATE

FWDSIS.ERROR

Notes