Getting Started

Flimstrip Carousel, a powerful, responsive, and extremely customizable infinite 3D carousel with image (.jpg, .jpg, .png, .webp) and video (.mp4) support and lightbox support using Revolution Lightbox, 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 interface like buttons are in 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, 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 carousel plane width and height. After you have the final images use tinypng to reduce the images size without losing quality, there are other similar tool.

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

There are a few HTML filse 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/FWDFSC.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'){
		setupFSC();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupFSC();
		});
	}

	function setupFSC(){
		
		new FWDFSC({   
			instance: 'fwdfsc0',
			parentId: 'myDiv',
			display: 'responsive',
			carouselDataId: 'carouselData',
			type: 'filmStrip',
			initializeWhenVisible: 'no',
			maxWidth: 1920,
			maxHeight: 700,
			autoScaleStartWidth: 1200,
			autoScale: 'yes',
			stats: 'no',
			gui: 'yes',
			showPreloader: 'yes',
			preloaderColor: '#000000',
			backgroundColor: '#FFFFFF',
			infinite: 'yes',
			gap: 0,
			planeWidth: 4.4,
			planeHeight: 2.8,
			showMaskGradient: 'yes',
			useCaption: 'yes',
			captionPosition: 'sticky',
			useBlackAndWhite: 'no',
			opacityStrength: 1,
			snap: 'yes',
			twirl: 'no',
			strongCurvedFlatSize: 2,
			scrollSpeedStrength: 0.9,
			scrollScaleStrength: 0,
			curveDistortionStrength: 1.5,
			reflectionSize: 0.3,
			reflectionOpacity: 0.13,
			liquidDistortionStrength: 0,
			cameraPositionX: 0,
			cameraPositionY: 0,
			x: -0.5,
			y: 0.9,
			z: -5.11,
			rotationX: 0,
			rotationZ: 0,

			// Post processing.
			antialias: 'yes',

			rgbEdge: 'no',
			rgbEdgeStrength: 0.3,
			rgbEdgeMax: 0.4,

			waveFrequency: 0.1,
			waveAmplitude: 0.02,
			mouseRippleStrength: 0,

			glitch: 'no',

			buldge: 'no',
			buldgeDirection: 'in',
			buldgeFixed: 'yes',
			buldgeStrength: 0.3,

			rippleDistortion: 'no',
			rippleDistortionStrength: 0.2,
			rippleDistortionSize: 0.5,

			useNoise: 'no',
			noiseSize: 0.4,
			noiseFadeSize: 0.2,
			noiseBlurStrength: 0.3,
			noiseFadeColor: '#000000',

			grid: 'no',
			gridAddRGBDistortion: 'yes',
			gridSize: 400,
			gridMouseRadiusFactor: 0.2,
			gridMouseStrengthFactor: 0.48,
			gridMouseRelaxation: 0.9,

			afterImage: 'no',
			afterImageDumping: 0.75,

			// Lightbox.
			rlPath: 'content/rl',
			useLightbox: "yes",
			rlUseDeepLinking: "yes",
			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: "yes",
			rlUseDrag: "yes",
			rlUseAsModal: "no",
			rlShowSlideShowButton: "yes",
			rlShowSlideShowAnimation: "yes",
			rlSlideShowAutoPlay: "no",
			rlSlideShowAutoStop: "no",
			rlSlideShowDelay: 6,
			rlSlideShowBkColor: "#2e2e2e",
			rlSlideShowFillColor: "#FFFFFF",
			rlUseKeyboard: "yes",
			rlUseDoubleClick: "yes",
			rlShowCloseButton: "yes",
			rlShowFullscreenButton: "yes",
			rlShowZoomButton: "yes",
			rlShowCounter: "yes",
			rlShowNextAndPrevBtns: "yes",
			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: "yes",
			rlShowThumbnailsIcon: "yes",
			rlThumbnailsHeight: 80,
			rlThumbnailsOverlayColor: "rgba(0,0,0,.4)",
			rlThumbnailsBorderSize: 2,
			rlThumbnailsBorderColor: "#FFFFFF",
			rlSpaceBetweenThumbnailsAndItem: 10,
			rlThumbnailsOffsetBottom: 10,
			rlSpaceBetweenThumbnails: 5,
			rlShowCaption: "yes",
			rlCaptionPosition: "bottomout",
			rlShowCaptionOnSmallScreens: "no",
			rlCaptionAnimationType: "motion",
			rlUseVideo: "yes",
			rlFillEntireScreenWithPoster: "yes",
			rlVolume: 1,
			rlVideoAutoPlay: "yes",
			rlNextVideoAutoPlay: "no",
			rlVideoAutoPlayText: "Click to unmute",
			rlShowLogo: "yes",
			rlLogoPath: "content/rl/content/evp/skin/logo.png",
			rlLogoLink: "",
			rlShowDefaultControllerForVimeo: "yes",
			rlShowScrubberWhenControllerIsHidden: "yes",
			rlShowRewindButton: "yes",
			rlShowVolumeButton: "yes",
			rlShowChromecastButton: "yes",
			rlShowPlaybackRateButton: "no",
			rlShowQualityButton: "yes",
			rlShowFullScreenButton: "yes",
			rlShowScrubberToolTipLabel: "yes",
			rlShowTime: "yes",
			rlTimeColor: "#B9B9B9",
			rlYoutubeQualityButtonNormalColor: "#B9B9B9",
			rlYoutubeQualityButtonSelectedColor: "#FFFFFF",
			rlScrubbersToolTipLabelBackgroundColor: "#FFFFFF",
			rlScrubbersToolTipLabelFontColor: "#5a5a5a",
			rlAudioVisualizerLinesColor: "#D60E63",
			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 fwdfsc1, fwdfsc2, fwdfsc3, etc... depending on how many carousels are added, also change the parentId to a different ID and if you want add a different carousel gallery by also change the carouselDataId to point to a different carousel gallery.

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

Setup carousel gallery

A carousel gallery 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 gallery 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/thumbnails/mp4.jpg" data-width="900" data-height="600"></div>
		<li data-rl-src="media/videos/fwd-1080p.mp4" data-rl-poster-src="media/images/mp4.jpg" data-rl-subtitle-src="media/subtitles/english_subtitle.vtt"></li>
		<div data-caption="">
			<p class="caption-title">Lightbox MP4 Self/External Hosted With Subtitle</p>
			<p class="caption-desc">Film Strip Carousel has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</div>
		<li data-rl-caption="">
			<p class="fwdrl-title">MP4 Self/External Hosted With Subtitle</p>
			<p class="fwdrl-desc">Film Strip Carousel has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</li>
	</div> 

	<div>
		<div data-src="media/thumbnails/adsense.jpg" data-width="900" data-height="600"></div>
		<li data-rl-src="media/videos/fwd-1080p.mp4" data-rl-poster-src="media/images/adsense.jpg" data-rl-vast-src="//googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on"></li>
		<div data-caption="">
			<p class="caption-title">Lightbox Google Adsense & IMA SDK/Interactive Media Ads</p>
			<p class="caption-desc">Google Adsense & IMA SDK/Interactive Media Ads support, <a href='https://webdesign-flash.ro/p/evp' target='_blank'>Easy Video Player</a>.</p>
		</div>
		<li data-rl-caption="">
			<p class="fwdrl-title">Google Adsense & IMA SDK/Interactive Media Ads</p>
			<p class="fwdrl-desc">Google Adsense & IMA SDK/Interactive Media Ads support, <a href='https://webdesign-flash.ro/p/evp' target='_blank'>Easy Video Player</a>.</p>
		</li>
	</div> 

	... etc add as many images as you want ...

</div>

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

Carousel item parameters

data-src - required media path (.jpg, .jpeg, .png, .webp, .mp4).
data-width - the image native width.
data-height - the image native height.

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.

To add a thumbnail caption, just add a <div> with a data-caption attribute. For a lightbox caption, add a <div> with a data-rl-caption attribute, as shown above in the template example. The classes can be styled with CSS in the global.css file.

Modify code

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

Settings

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

	function setupFSC(){
		new FWDFSC({ 

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

instance

Type: (String) - default: unset

The carousel instance name, this is used to call the API. In the examples files the instance name is set to fwdfsc0, if you are using multiple carousels instances just change the instance to fwdfsc1, fwdfsc2, fwdfsc3, 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

carousel display type.

responsive - displays the carousel in responsive type based on the maxWidth and maxHeight settings.
afterparent - displays the carousel based on the parent width and height, this will be ignored if the carousel is horizontal.

carouselDataId

Type: (String) - default: unset

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

type

Type: (String) - default: filmStrip

The carousel topology, this can be filmStrip, filmStripExtended and strongCureved.

initializeWhenVisible

Type: (String) - default: yes

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

maxWidth

Type: (Number) - default: 1920

The carousel maximum width in px.

maxHeight

Type: (Number) - default: 800

The carousel maximum height in px.

autoScaleStartWidth

Type: (Number) - default: 1200

The minimum size (in pixels) at which the carousel will start to adjust its height if autoscale is set to yes.

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.

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: rgba(0, 0, 0, 1)

The main background color in HEX or RGBA.

infinite

Type: (String) - default: yes

This can be yes or no, sets the sider infinite mode or not.

gap

Type: (Number) - default: 0

Gap between items in units.

planeWidth

Type: (Number) - default: 1.8

The plane width in units.

planeHeight

Type: (Number) - default: 1.4

The plane height in units.

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, enable the caption globaly.

useBlackAndWhite

Type: (String) - default: yes

This can be yes or no, enable black and white for the not central items.

opacityStrength

Type: (Number) - default: 0.8

Fade opacity for items that are not centered.

snap

Type: (String) - default: yes

This can be yes or no, enable snap for the closeset item to center.

twirl

Type: (String) - default: no

This can be yes or no, enable twirl for all items except the center item.

strongCurvedFlatSize

Type: (Number) - default: 2

Sctrong cureve strength factor for the strongCurved topology.

scrollSpeedStrength

Type: (Number) - default: 0.3

Scroll strength factor.

scrollScaleStrength

Type: (Number) - default: 0.8

Scroll scale strength factor.

curveDistortionStrength

Type: (Number) - default: 2

Curve distortion scroll strength.

liquidDistortionStrength

Type: (Number) - default: 0

Liquid distortion scroll strength.

reflectionSize

Type: (Number) - default: 0.3

Item reflection size, a number from 0 to 1.

reflectionOpacity

Type: (Number) - default: 0.13

Item reflection opacity, a number from 0 to 1.

cameraPositionX

Type: (Number) - default: 0

Perspective camera x position.

cameraPositionY

Type: (Number) - default: 0

Perspective camera y position.

x

Type: (Number) - default: 0

Carousel x position.

y

Type: (Number) - default: 0

Carousel y position.

z

Type: (Number) - default: 0

Carousel z position.

antialias

Type: (String) - default: yes

This can be yes or no, enable post-processing anitialias for smoother visual experience.

rgbEdge

Type: (String) - default: no

This can be yes or no, enable post-processing rgb and fade opacity.

rgbEdgeStrength

Type: (Number) - default: 0.3

RGB edge shift distortion strength, a number from 0 to 1

rgbEdgeMax

Type: (Number) - default: 0.4

RGB edge size, a number from 0 to 1

waveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

mouseRippleStrength

Type: (Number) - default: 0

Moiuse ripple strength, a number from 0 to 1.

glitch

Type: (String) - default: no

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

buldge

Type: (String) - default: no

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

buldgeDirection

Type: (String) - default: in

The buldge post-porcessing buldge effect it can be in and out.

buldgeFixed

Type: (String) - default: no

This can be yes or no, enables the bulge post-processing effect, which can be either static (fixed) or responsive to scroll.

buldgeStrength

Type: (Number) - default: 1.3

Buldge post-porcessing effect strength.

rippleDistortion

Type: (String) - default: no

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

rippleDistortionStrength

Type: (Number) - default: 0.2

Ripple post-porcessing effect strength.

rippleDistortionSize

Type: (Number) - default: 0.5

Ripple post-porcessing effect size.

useNoise

Type: (String) - default: no

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

noiseSize

Type: (Number) - default: 0.48

Noise post-processing size.

noiseFadeSize

Type: (Number) - default: 0.2

Noise post-processing fade size.

noiseBlurStrength

Type: (Number) - default: 0.3

Noise post-processing blur size.

noiseFadeColor

Type: (String) - default: #000000

Noise post-processing color.

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.

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 fwdfsc0.methodName( /* arguments */ ), please note that fwdfsc0 is the carousel instance name, if you are using multiple carousels don't forget to set the instance unique for each instance like this fwdfsc1, fwdfsc2, fwdfsc3, 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

Flimstrip 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 fwdfscAPI = setInterval(() =>{
	if(window['fwdfsc0']){
		console.log('FSC API ready')
		clearInterval(fwdfscAPI);

		// Register the update event.
		fwdfsc0.addEventListener(FWDFSC.ITEM_UPDATE, onItemUpdate);
	}
}, 100);

// Listen for the CHANGE event.
function onItemUpdate(e){
	//console.log(e)
}

FWDFSC.ITEM_UPDATE

Dispatched when the carousel item positions are changing.

FWDFSC.ERROR

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

Notes

As a developer, I love building with Film Strip Carousel (FSC). Crafting the curved 3D film-strip 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 FSC is one of those projects where code and design truly meet.

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

JavaScript Documentation

Getting Started

Installation

Setup carousel gallery

Carousel item parameters

Lightbox item parameters

Modify code

Settings

Example

instance

parentId

displayType

carouselDataId

type

initializeWhenVisible

maxWidth

maxHeight

autoScaleStartWidth

autoScale

stats

gui

showPreloader

preloaderColor

backgroundColor

infinite

gap

planeWidth

planeHeight

showMaskGradient

useCaption

useBlackAndWhite

opacityStrength

snap

twirl

strongCurvedFlatSize

scrollSpeedStrength

scrollScaleStrength

curveDistortionStrength

liquidDistortionStrength

reflectionSize

reflectionOpacity

cameraPositionX

cameraPositionY

x

y

z

antialias

rgbEdge

rgbEdgeStrength

rgbEdgeMax

waveFrequency

waveAmplitude

mouseRippleStrength

glitch

buldge

buldgeDirection

buldgeFixed

buldgeStrength

rippleDistortion

rippleDistortionStrength

rippleDistortionSize

useNoise

noiseSize

noiseFadeSize

noiseBlurStrength

noiseFadeColor

grid

gridAddRGBDistortion

gridSize

gridMouseRadiusFactor

gridMouseStrengthFactor

gridMouseRelaxation

afterImage

afterImageDumping

rlPath

useLightbox

rlUseDeepLinking

rlItemBackgroundColor

rlDefaultItemWidth

rlDefaultItemHeight