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

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/FWDOC.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'){
		setupOC();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupOC();
		});
	}

    function setupOC(){
		
		new FWDOC({
                
			// Main settings.  
            instance: 'fwdoc0',
            parentId: 'myDiv',
            carouselDataId: 'carouselData',
            logoPath: 'media/models/nintendo.glb', //'media/images/logo.png
            hdriPath: 'media/models/studio_small_09_1k.exr',
            logoInitRotation: { x: 0, y:0, z: 0},
            logoInitPosition: { x: 0, y: 1, z: 0},
            logoScale: 0.82,
            ambientlightIntensity: 1,
            hdriIntensity: 1,
            pointlightIntensity: 0.2,
            hideHalfSize: false,
            nudgeModelOnMobile: true,
            maxWidth: 1920,
            maxHeight: 1000,
            autoScaleStartWidth: 1820,
            direction: 'left',
            autoScale: true,
            gui: true,
            showPreloader: 'yes',
            preloaderColor: '#000000',
            backgroundColor: '#ffffff',
            inverseTexture: true,
            mouseRotation: true,
            radiusX: 11,
            radiusZ: 6,
            verticalGap: 6.7,
            horizontalGap: 0.1,
            planeWidth: 1.6,
            planeHeight: 2.6,
            showMaskGradient: false,
            useCaption: true,
            opacityStrength: 1,
            limitOpacity: true,
            snap: true,
            scrollSpeedStrength: 0.7,
            curveDistortionStrength: 2.5,
            liquidDistortionStrength: 0,
            x: 0,
            y: 0,
            z: -8.57,
            rotationX: 0,
            rotationY: 0,
            rotationZ:0,

            // Post processing.
            antialias: true,
            mouseRippleStrength: 0,
            rgbShiftStrength: 0,
            waveFrequency: 0.1,
            waveAmplitude: 0.02,

            buldge: false,
            buldgeDirection: 'in',
            buldgeFixed: true,
            buldgeStrength: 0.3,

            carousel: false,
            carouselAddRGBDistortion: true,

            carouselSize: 400,
            carouselMouseRadiusFactor: 0.2,
            carouselMouseStrengthFactor: 0.48,
            carouselMouseRelaxation: 0.9,
            afterImage: false,
            afterImageDumping: 0.75,

            // Lightbox.
            rlPath: 'content/rl',
            genericThumbnailPath: 'content/generic.png',
            useLightbox: true,
            rlUseDeepLinking: true,
            rlItemBackgroundColor: "#212121",
            rlDefaultItemWidth: 1527,
            rlDefaultItemHeight: 859,
            rlItemOffsetHeight: 37,
            rlItemOffsetHeightButtonsTop: 47,
            rlItemBorderSize: 0,
            rlItemBorderColor: "#FFFFFF",
            rlMaxZoom: 1.2,
            rlPreloaderBkColor: "#2e2e2e",
            rlPreloaderFillColor: "#FFFFFF",
            rlButtonsAlignment: "in",
            rlButtonsHideDelay: 5,
            rlMediaLazyLoading: true,
            rlUseDrag: true,
            rlUseAsModal: false,
            rlShowSlideShowButton: true,
            rlShowSlideShowAnimation: true,
            rlSlideShowAutoPlay: false,
            rlSlideShowAutoStop: false,
            rlSlideShowDelay: 6,
            rlSlideShowBkColor: "#2e2e2e",
            rlSlideShowFillColor: "#FFFFFF",
            rlUseKeyboard: true,
            rlUseDoubleClick: true,
            rlShowCloseButton: true,
            rlShowFullscreenButton: true,
            rlShowZoomButton: true,
            rlShowCounter: true,
            rlShowNextAndPrevBtns: true,
            rlSpaceBetweenBtns: 8,
            rlButtonsOffsetIn: 10,
            rlButtonsOffsetOut: 10,
            rlBackgroundColor: "rgba(0,0,0,.99)",
            rlShareButtons: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
            rlShareText: "Share on",
            rlSharedURL: "deeplink",
            rlShareMainBackgroundColor: "rgba(0,0,0,.4)",
            rlShareBackgroundColor: "#FFFFFF",
            rlShowThumbnails: true,
            rlShowThumbnailsIcon: true,
            rlThumbnailsHeight: 80,
            rlThumbnailsOverlayColor: "rgba(0,0,0,.4)",
            rlThumbnailsBorderSize: 2,
            rlThumbnailsBorderColor: "#FFFFFF",
            rlSpaceBetweenThumbnailsAndItem: 10,
            rlThumbnailsOffsetBottom: 10,
            rlSpaceBetweenThumbnails: 5,
            rlShowCaption: true,
            rlCaptionPosition: "bottomout",
            rlShowCaptionOnSmallScreens: false,
            rlCaptionAnimationType: "motion",
            rlUseVideo: true,
            rlFillEntireScreenWithPoster: true,
            rlVolume: 1,
            rlVideoAutoPlay: false,
            rlNextVideoAutoPlay: false,
            rlVideoAutoPlayText: "Click to unmute",
            rlShowLogo: true,
            rlLogoPath: "content/rl/content/evp/skin/logo.png",
            rlLogoLink: "",
            rlShowDefaultControllerForVimeo: true,
            rlShowScrubberWhenControllerIsHidden: true,
            rlShowRewindButton: true,
            rlShowVolumeButton: true,
            rlShowChromecastButton: true,
            rlShowPlaybackRateButton: false,
            rlShowQualityButton: true,
            rlShowFullScreenButton: true,
            rlShowScrubberToolTipLabel: true,
            rlShowTime: true,
            rlTimeColor: "#B9B9B9",
            rlYoutubeQualityButtonNormalColor: "#B9B9B9",
            rlYoutubeQualityButtonSelectedColor: "#FFFFFF",
            rlScrubbersToolTipLabelBackgroundColor: "#FFFFFF",
            rlScrubbersToolTipLabelFontColor: "#5a5a5a",
            rlAudioVisualizerLinesColor: "#007bff",
            rlAudioVisualizerCircleColor: "#FFFFFF",
            rlThumbnailsPreviewWidth: 196,
            rlThumbnailsPreviewBackgroundColor: "#2e2e2e",
            rlThumbnailsPreviewBorderColor: "#414141",
            rlThumbnailsPreviewLabelBackgroundColor: "#414141",
            rlThumbnailsPreviewLabelFontColor: "#CCCCCC",
            rlSkipToVideoText: "You can skip to video in: ",
            rlSkipToVideoButtonText: "Skip Ad"
		});
		
	}
</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 fwdoc1, fwdoc2, fwdoc3, 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 carouselDataId to point to a different carousel.

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

Setup Galleries

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 carouselDataId option in the carousel settings like this carouselDataId: 'carouselData'.

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

	<div>
		<div data-src="media/videos/nintendo/please-be-happy.png" data-width="401" data-height="650"></div>
		<div data-rl-src="link:https://fwdapps.net" data-rl-target="_blank"></div>
		<div data-caption="">
			<p class="caption-title">EA Sports FC 26</p>
			<p class="caption-desc">Slice-of-life visual novel set in a fictional version of Wellington, New Zealand, <a href="https://fwdapps.net" target="_blank">more info here</a>.</p>
		</div>
	</div> 

	<div>
		<div data-src="media/images/nintendo/darkness.png" data-width="401" data-height="650"></div>
		<div data-rl-src="link:https://fwdapps.net" data-rl-target="_blank"></div>
		<div data-caption="">
			<p class="caption-title">Dead Of Darkness</p>
			<p class="caption-desc">Investigate a mysterious island and unravel its disturbing secret, <a href="https://fwdapps.net" target="_blank">more info here</a>.</p>
		</div>
	</div>

	<div>
		<div data-src="media/images/nintendo/no-son-of-mine.png" data-width="401" data-height="650"></div>
		<div data-rl-src="link:https://fwdapps.net" data-rl-target="_blank"></div>
		<div data-caption="">
			<p class="caption-title">No Son Of Mine</p>
			<p class="caption-desc">Face your fears this Halloween with the Feardemic Horror Bundle, a chilling trio of psychological and survival horror games bundle, <a href="https://fwdapps.net" target="_blank">more info here</a>.</p>
		</div>
	</div>

	<div>
		<div data-src="media/images/nintendo/hot-blood.png" data-width="401" data-height="650"></div>
		<div data-rl-src="link:https://fwdapps.net" data-rl-target="_blank"></div>
		<div data-caption="">
			<p class="caption-title">Hot Blood</p>
			<p class="caption-desc">Feisty brawler that puts players in the role of Roxy, an accidental heroine who’s caught in the middle of a zombie apocalypse while she’s out shopping with her boyfriend, <a href="https://fwdapps.net" target="_blank">more info here</a>.</p>
		</div>
	</div>

	...

</div>

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

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.

Lightbox item parameters

data-rl-src - supported lightbox sources: mp4, mp3, YouTube (use the YouTube video URL), Vimeo (use the Vimeo video URL), HLS, Google Drive and other cloud formats, iframe (use the page URL), HTML content (use the element ID, e.g., #myId), Google Maps (use the Google Maps embed URL), PDF (use a .pdf URL). If you want no action when the item is clicked, set this to none. To open a new page when the center/front item is clicked, set this to the page URL and prefix it with link: (for example, link:https://your-page.com). To open it in the same window, set data-rl-target to _self; to open it in a new page, set it to _blank.
data-rl-poster-src - optional poster. This holds the poster src, the supported formats are .jpg, .jpeg and .png, the poster.
data-rl-subtitle-src - optional subtitle for video. The sbutitle format has to be srt/vtt, a subtitle file example can be found in the media/subtitles folder.
data-rl-vast-src - optional VAST/IMA URL.

Carousel item caption

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

<div>
	<div data-src="media/videos/nintendo/please-be-happy.png" data-width="401" data-height="650"></div>
	<div data-rl-src="link:https://fwdapps.net" data-rl-target="_blank"></div>
	<div data-caption="">
		<p class="caption-title">EA Sports FC 26</p>
		<p class="caption-desc">Slice-of-life visual novel set in a fictional version of Wellington, New Zealand, <a href="https://fwdapps.net" target="_blank">more info here</a>.</p>
	</div>
</div>

Modify code

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

Settings

Oval 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'){
		setupOC();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupOC();
		});
	}

    function setupOC(){
		new FWDOC({ 

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

instance

Type: (String) - default: fwdoc0

The carousel instance name used to access the API (example: fwdoc0). If you use multiple instances, set different names like fwdoc1, fwdoc2, etc.

parentId

Type: (String) - default: unset

The carousel holder element ID (the DIV where OC is added). Must be unique in the page.

carouselDataId

Type: (String) - default: unset

The carousel data DIV ID. See the Setup Galleries section.

logoPath

Type: (String) - default: unset

Path to the center logo (image) or a 3D model file. Example: .png / .glb, the supported format for themodels is gltf or glb.

hdriPath

Type: (String) - default: unset

Path to the HDRI environment map used for lighting/reflections. Example: .exr, supported format is .exr.

logoInitRotation

Type: (Object) - default: { x: 0, y: 0, z: 0 }

Initial rotation for the center logo/model.

logoInitPosition

Type: (Object) - default: { x: 0, y: 0, z: 0 }

Initial position for the center logo/model.

logoScale

Type: (Number) - default: 0.82

Scale factor for the center logo/model.

ambientlightIntensity

Type: (Number) - default: 1

Ambient light intensity.

hdriIntensity

Type: (Number) - default: 1

HDRI environment intensity.

pointlightIntensity

Type: (Number) - default: 0.2

Point light intensity.

hideHalfSize

Type: (Boolean) - default: false

If enabled, items outside the visible area are hidden earlier (helps performance in some scenes).

nudgeModelOnMobile

Type: (Boolean) - default: true

Applies a small adjustment for the center model on mobile devices.

maxWidth

Type: (Number) - default: 1920

The carousel maximum width in pixels.

maxHeight

Type: (Number) - default: 1000

The carousel maximum height in pixels.

autoScaleStartWidth

Type: (Number) - default: 1820

Auto-scale starts applying when the viewport/parent width is below this value.

direction

Type: (String) - default: left

Initial carousel direction. Example values: left / right.

autoScale

Type: (Boolean) - default: true

Automatically scales the carousel based on available space.

gui

Type: (Boolean) - default: true

Shows the live settings GUI (useful for tweaking, not recommended for production).

showPreloader

Type: (Boolean) - default: true

Show or hide the preloader.

preloaderColor

Type: (String) - default: #000000

The preloader color (HEX or RGB).

backgroundColor

Type: (String) - default: #ffffff

The background color (HEX or RGB).

inverseTexture

Type: (Boolean) - default: true

If enabled, inverts the texture orientation for the planes (useful depending on how assets were exported).

mouseRotation

Type: (Boolean) - default: true

If enabled, the carousel reacts to mouse movement by rotating slightly.

radiusX

Type: (Number) - default: 11

Horizontal radius of the oval (controls how wide the carousel is).

radiusZ

Type: (Number) - default: 6

Depth radius of the oval (controls how deep the carousel is).

verticalGap

Type: (Number) - default: 6.7

Vertical spacing between items (in scene units).

horizontalGap

Type: (Number) - default: 0.1

Horizontal spacing between items (in scene units).

planeWidth

Type: (Number) - default: 1.6

Item plane width (in scene units).

planeHeight

Type: (Number) - default: 2.6

Item plane height (in scene units).

showMaskGradient

Type: (Boolean) - default: false

Shows a top/bottom gradient overlay mask.

useCaption

Type: (Boolean) - default: true

Enable or disable item captions.

opacityStrength

Type: (Number) - default: 1

Opacity fade strength for items away from the center.

limitOpacity

Type: (Boolean) - default: true

If enabled, limits the minimum opacity value for items.

snap

Type: (Boolean) - default: true

If enabled, the carousel snaps to the nearest item after drag/scroll.

scrollSpeedStrength

Type: (Number) - default: 0.7

Scroll/drag speed factor.

curveDistortionStrength

Type: (Number) - default: 2.5

Curve distortion strength applied to the planes.

liquidDistortionStrength

Type: (Number) - default: 0

Liquid distortion strength applied to the planes.

x

Type: (Number) - default: 0

Camera position X.

y

Type: (Number) - default: 0

Camera position Y.

z

Type: (Number) - default: -8.57

Camera position Z.

rotationX

Type: (Number) - default: 0

Camera rotation X.

rotationY

Type: (Number) - default: 0

Camera rotation Y.

rotationZ

Type: (Number) - default: 0

Camera rotation Z.

antialias

Type: (Boolean) - default: true

Enables anti-aliasing for smoother edges (small performance cost).

mouseRippleStrength

Type: (Number) - default: 0

Mouse ripple post-processing intensity.

rgbShiftStrength

Type: (Number) - default: 0

RGB shift post-processing intensity.

waveFrequency

Type: (Number) - default: 0.1

Wave distortion frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave distortion amplitude.

buldge

Type: (Boolean) - default: false

Enables the buldge post-processing effect.

buldgeDirection

Type: (String) - default: in

Sets the buldge direction. Example values: in / out.

buldgeFixed

Type: (Boolean) - default: true

If enabled, the buldge is fixed instead of following input.

buldgeStrength

Type: (Number) - default: 0.3

Buldge strength.

carousel

Type: (Boolean) - default: false

Enables the carousel post-processing effect.

carouselAddRGBDistortion

Type: (Boolean) - default: true

Adds RGB distortion to the carousel post-processing effect.

carouselSize

Type: (Number) - default: 400

Carousel post-processing size.

carouselMouseRadiusFactor

Type: (Number) - default: 0.2

Carousel post-processing mouse radius factor.

carouselMouseStrengthFactor

Type: (Number) - default: 0.48

Carousel post-processing mouse strength factor.

carouselMouseRelaxation

Type: (Number) - default: 0.9

Carousel post-processing mouse relaxation.

afterImage

Type: (Boolean) - default: false

Enables the after-image post-processing effect.

afterImageDumping

Type: (Number) - default: 0.75

After-image strength factor (higher values leave longer trails).

rlPath

Type: (String) - default: content/rl

The lightbox folder path. The lightbox is loaded asynchronously at run time, and this path can be either relative or absolute.

useLightbox

Type: (String) - default: yes

This can be yes or no, loads the lightbox, set it to no if you don't use the lightbox.

rlUseDeepLinking

Type: (String) - default: yes

This can be yes or no, creates an unique and shareable link and history entry for the current opened media lightbox item.

rlItemBackgroundColor

Type: (String) - default: #212121

Background color for the lightbox items.

rlDefaultItemWidth

Type: (Number) - default: 1527

The default global lightbox item width in px if its Iframe, video or HTML content.

rlDefaultItemHeight

Type: (Number) - default: 1527

The default global lightbox item height in px if its Iframe, video or HTML content.

rlItemOffsetHeight

Type: (Number) - default: 37

Offset/gap in px for the lightbox items when buttons are aligned in or out.

rlItemOffsetHeightButtonsTop

Type: (Number) - default: 47

Offset/gap in px for the lightbox items when buttons are aligned top.

rlItemBorderSize

Type: (Number) - default: 0

Lightbox item border size in px.

rlItemBorderColor

Type: (String) - default: #FFFFFF

Lightbox item border color.

rlMaxZoom

Type: (Number) - default: 1.2

The zoom factor for the lightbox item if it is an image and it is zoomed in. For example to zoom the image 150% set this option to 1.5.

rlPreloaderBkColor

Type: (String) - default: #2e2e2e

The lightbox preloader circular animation background color.

rlPreloaderFillColor

Type: (String) - default: #FFFFFF

The lightbox preloader circular animation fill color.

rlButtonsAlignment

Type: (String) - default: in

This can be in, out and top the lightbox button alignment.

rlButtonsHideDelay

Type: (Number) - default: 5

Duration in seconds until the lightbox buttons will hide after several seconds of user inactivity.

rlMediaLazyLoading

Type: (String) - default: yes

This can be yes or no, loads the lightbox images and video posters in the background this way the user does not have to wait to load an image or a poster while navigating the lightbox gallery.

rlUseDrag

Type: (String) - default: yes

This can be yes or no, drag the lightbox media item to navigate to the next or previous slide.

rlUseAsModal

Type: (String) - default: no

This can be yes or no, close the lightbox only if the close button is used.

rlShowSlideShowButton

Type: (String) - default: yes

This can be yes or no, show the lightbox slideshow play/pause button.

rlShowSlideShowAnimation

Type: (String) - default: yes

This can be yes or no, show the lightbox slideshow circular animation.

rlSlideShowAutoPlay

Type: (String) - default: no

This can be yes or no, the lightbox will start the slideshow as soon as the first media item is showed.

rlSlideShowAutoStop

Type: (String) - default: no

This can be yes or no, the lightbox will stop the slideshow when the last media item is displayed.

rlSlideShowDelay

Type: (Number) - default: 6

The lightbox slideshow delay in seconds, floats are accepted as well for example 6.5 seconds.

rlSlideShowBkColor

Type: (String) - default: #2e2e2e

The lightbox slideshow circular animation background color.

rlSlideShowFillColor

Type: (String) - default: #FFFFFF

The lightbox slideshow circular animation fill color

rlUseKeyboard

Type: (String) - default: yes

This can be yes or no, add keyboard support. ESC: close lightbox, LEFT & RIGHT ARROWS: skip video 10 seconds forward or backward if video playing or change slides if the video is not playing, F: video fullscreen/normalscreen.

rlUseDoubleClick

Type: (String) - default: yes

This can be yes or no, use double click or double tap to maximize and minimize the lightbox item if it's an image.

rlShowCloseButton

Type: (String) - default: yes

This can be yes or no, show the lightbox close button.

rlShowFullscreenButton

Type: (String) - default: yes

This can be yes or no, show the lightbox fullscreen button.

rlShowZoomButton

Type: (String) - default: yes

This can be yes or no, show the lightbox zoom in and zoom out button.

rlShowCounter

Type: (String) - default: yes

This can be yes or no, show the lightbox counter (item current number and total number of items).

rlShowNextAndPrevBtns

Type: (String) - default: yes

This can be yes or no, show the next and previous lightbox item button.

rlSpaceBetweenBtns

Type: (Number) - default: 5

Space/gap in px between lightbox buttons.

rlButtonsOffsetIn

Type: (Number) - default: 10

Space/gap between the buttons and the lightbox item.

rlButtonsOffsetOut

Type: (Number) - default: 10

Space/gap between the buttons and the and window left or right side.

rlBackgroundColor

Type: (String) - default: rgba(0,0,0,.99)

Main lightbox background RGBA color.

rlShareButtons

Type: (String) - default: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger']

Lightbox share button and share buttons window. Set the order as you want and remove the ones that you don't need. If you don't want to use the share button leave this option empty shareButtons:[].

rlShareText

Type: (String) - default: Share on

The lihgtbox share window text.

rlSharedURL

Type: (String) - default: deeplink

This can be deeplink, page and media, the URL used to share the current showed lightbox item.

rlShareMainBackgroundColor

Type: (String) - default: rgba(0,0,0,.4)

The lightbox main share window background RGBA color.

rlShareBackgroundColor

Type: (String) - default: #FFFFFF

The lightbox small share window background color.

rlShowThumbnails

Type: (String) - default: yes

This can be yes or no, show the lightbox thumbnails.

rlShowThumbnailsIcon

Type: (String) - default: yes

This can be yes or no, show the lightbox thumbnails play icon for the videos.

rlThumbnailsHeight

Type: (Number) - default: 80

The lightbox thumbnails height in px, the width is set automatically to keep a correct image ratio.

rlThumbnailsOverlayColor

Type: (String) - default: rgba(0,0,0,.4)

The lightbox thumbnails transparent overlay RGBA color.

rlThumbnailsBorderSize

Type: (Number) - default: 2

The lightbox thumbnails boder size in px.

rlThumbnailsBorderColor

Type: (Number) - default: #FFFFFF

The lightbox thumbnails border color.

rlSpaceBetweenThumbnailsAndItem

Type: (Number) - default: 10

The lightbox space/gap in px between the thumbnails and the item.

rlThumbnailsOffsetBottom

Type: (Number) - default: 10

The space/gap in px between thumbnails and the lightbox bottom part.

rlSpaceBetweenThumbnails

Type: (Number) - default: 5

The lightbox space/gap in px between thumbnails.

rlShowCaption

Type: (String) - default: yes

This can be yes or no, show the lightbox caption.

rlCaptionPosition

Type: (String) - default: yes

This can be bottomout, bottomin or topin, the caption position.

rlShowCaptionOnSmallScreens

Type: (String) - default: no

This can be yes or no, show the lightbox caption on small screens if the lightbox height is smaller than 220px.

rlCaptionAnimationType

Type: (String) - default: motion

This can be motion or opacity, the lightbox caption animation type.

rlUseVideo

Type: (String) - default: yes

This can be yes or no, enable video support inside the lightbox, please make sure to set this to no if you are not using video.

rlFillEntireScreenWithPoster

Type: (String) - default: yes

This can be yes or no, fill the video screen poster to cover the entire video screen viewport.

rlVolume

Type: (Number) - default: 1

The lightbox video/audio start volume.

rlVideoAutoPlay

Type: (String) - default: no

This can be yes or no, the lightbox video/audio autoplay for the first lightbox item when it is showed first time.

rlNextVideoAutoPlay

Type: (String) - default: no

This can be yes or no, the lightbox video/audio autoplay for the next or previous item, when the lightbox is changed/navigating to a different item.

rlVideoAutoPlayText

Type: (String) - default: Click to unmute

Lihgtox video autoplay unmute button text. In some cases, the video can't autoplay with sound, for this cases an unmute button will appear with the text set in this option.

rlShowLogo

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio logo.

rlLogoPath

Type: (String) - default: content/rl/content/evp/skin/logo.png

The lihgtbox video/audio logo path, the supported formats are .jpg, .jpeg, .png.

rlLogoLink

Type: (String) - default:

The page URL to open when the video/audio logo is clicked, if you don't want this option leave it black.

rlShowDefaultControllerForVimeo

Type: (String) - default: yes

This can be yes or no, use the player controller instead of the default Vimeo controller.

rlShowScrubberWhenControllerIsHidden

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio main scrubber when the controller is hidden.

rlShowRewindButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio rewind button.

rlShowVolumeButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio volume button.

rlShowChromecastButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio chromecast button.

rlShowPlaybackRateButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio playbackrate speed button.

rlShowQualityButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio quality button.

rlShowFullScreenButton

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio fullscreen button.

rlShowScrubberToolTipLabel

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio scrubber tooltip label.

rlShowTime

Type: (String) - default: yes

This can be yes or no, show the lightbox video/audio current and total time.

rlTimeColor

Type: (String) - default: #B9B9B9

The lihgtbox video/audio current and total time HEX color.

rlYoutubeQualityButtonNormalColor

Type: (String) - default: #B9B9B9

The lihgtbox Youtube quality button text normal color.

rlYoutubeQualityButtonSelectedColor

Type: (String) - default: #B9B9B9

The lihgtbox Youtube quality button text selected color.

rlScrubbersToolTipLabelBackgroundColor

Type: (String) - default: #FFFFFF

The lihgtbox video and volume scrubbers tooltips background color.

rlAudioVisualizerLinesColor

Type: (String) - default: #D60E63

The lihgtbox audio visualizer lines color.

rlAudioVisualizerCircleColor

Type: (String) - default: #FFFFFF

The lihgtbox audio visualizer circle color.

rlThumbnailsPreviewBackgroundColor

Type: (String) - default: #2e2e2e

The lightbox thumbnails preview background color.

rlThumbnailsPreviewBorderColor

Type: (String) - default: #414141

The lightbox thumbnails preview border color.

rlThumbnailsPreviewLabelBackgroundColor

Type: (String) - default: #CCCCCC

The lightbox thumbnails preview label background color.

rlSkipToVideoText

Type: (String) - default: You can skip to video in:

The lightbox advertisement skip text.

rlSkipToVideoButtonText

Type: (String) - default: Skip Ad

The lightbox advertisement skip to video button text.

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 carousels don't forget to set the instance unique for each instance like this fwdoc1, fwdoc2, fwdoc3, etc... depending on how many carousels are added.

destory

.destory()

Destroy the instance and removes it from the DOM.

Events

Oval 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 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)
}

FWDOC.ITEM_UPDATE

Dispatched when the carousel item postions are changing.

FWDOC.ERROR

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

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.

JavaScript Documentation

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

Getting Started

Installation

Setup Galleries

Carousel item parameters

Lightbox item parameters

Carousel item caption

Modify code

Settings

Example

instance

parentId

carouselDataId

logoPath

hdriPath

logoInitRotation

logoInitPosition

logoScale

ambientlightIntensity

hdriIntensity

pointlightIntensity

hideHalfSize

nudgeModelOnMobile

maxWidth

maxHeight

autoScaleStartWidth

direction

autoScale

gui

showPreloader

preloaderColor

backgroundColor

inverseTexture

mouseRotation

radiusX

radiusZ

verticalGap

horizontalGap

planeWidth

planeHeight

showMaskGradient

useCaption

opacityStrength

limitOpacity

snap

scrollSpeedStrength

curveDistortionStrength

liquidDistortionStrength

x

y

z

rotationX

rotationY

rotationZ

antialias

mouseRippleStrength

rgbShiftStrength

waveFrequency

waveAmplitude

buldge

buldgeDirection

buldgeFixed

buldgeStrength

carousel

carouselAddRGBDistortion

carouselSize

carouselMouseRadiusFactor

carouselMouseStrengthFactor

carouselMouseRelaxation

afterImage

afterImageDumping

rlPath

useLightbox

rlUseDeepLinking

rlItemBackgroundColor

rlDefaultItemWidth

rlDefaultItemHeight

rlItemOffsetHeight

rlItemOffsetHeightButtonsTop