JavaScript Documentation
Documentation for the JavaScript version, API and overall JavaScript implementation.
Getting Started
Filmstrip Slider is a powerful, responsive, and extremely customizable 3D WebGL slider built with Three.js. It delivers a cinematic film-strip experience with advanced post-processing effects, physics-based motion, and a built-in lightbox supporting images, videos, audio, iframes, and links.
For the full filmstrip experience, use enough meshes/items (recommended: 7 or more).
It is built using EcmaScript6 using the latest JavaScript and CSS standards. The slider uses Three.js and WebGL shaders running exclusively on the device's GPU, while interface elements like buttons are in 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. To minimize performance impact, choose images visually close in size to the slider. After you have the final images use tinypng to reduce the image size without losing quality.
Installation
There are a few HTML files 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 reference.
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. The content folder has to be uploaded on the server where the slider is used.
Include the slider CSS file and JavaScript in the header:
<head>
<!-- ... -->
<link rel="stylesheet" href="./content/global.css">
<script type="text/javascript" src="./src/FWDFS.js"></script>
<!-- ... -->
</head>The next step is to add the initialize code in the page header or footer after the inclusion of the slider JavaScript and CSS files.
<script type="text/javascript">
if(document.readyState == 'complete'){
fwdSetupFSS();
}else{
document.addEventListener('DOMContentLoaded', ()=>{
fwdSetupFSS();
});
}
function fwdSetupFSS(){
new FWDFS({
// Main settings.
instance: 'fwdfs0',
parentId: 'myDiv',
display: 'responsive',
sliderDataId: 'sliderData',
initializeWhenVisible: false,
maxWidth: 4920,
maxHeight: 1000,
autoScaleStartWidth: 1200,
autoScale: true,
stats: false,
gui: false,
showPreloader: true,
preloaderColor: '#ffffff',
backgroundColor: '#000000',
useStrip: true,
stripColor: '#000000',
infinite: true,
gap: 0,
planeWidth: 4.0,
planeHeight: 2.8,
snap: true,
randomizeImages: false,
useIntro: true,
introStartOffsetItems: 3,
introStartSmoothTime: 0.3,
showMaskGradient: false,
useCaption: true,
captionPosition: 'sticky',
useBlackAndWhite: false,
hoverBurnIntensity: 1.0,
hoverType: 'zoomAndBurn',
opacityStrength: 1,
opacityFadeStartItems: 0.6,
scrollSpeedStrength: 0.6,
scrollScaleStrength: 0,
curveDistortionStrength: 1.5,
curveCenterPosition: 0.373,
strongCurvedFlatSize: 2.6,
liquidDistortionStrength: 0,
meshCenterOffsetX: 0,
cameraPositionX: 0,
cameraPositionY: 0,
x: -0.22,
y: 0.23,
z: -1.87,
rotationX: 0.05,
rotationY: -0.08,
// Light settings.
useLights: true,
lightColor: '#ffffff',
lightIntensity: 1,
lightAmbient: 0.5,
lightSpecularStrength: 0.14,
lightSpecularPower: 30.0,
lightFresnelStrength: 1.37,
lightFresnelPower: 5.96,
lightDirectionX: -0.22,
lightDirectionY: 0.52,
lightDirectionZ: 1.0,
// Post processing.
antialias: true,
rgbEdge: false,
rgbEdgeStrength: 0.3,
rgbEdgeMax: 0.4,
waveFrequency: 0.1,
waveAmplitude: 0.02,
mouseRippleStrength: 0,
glitch: false,
buldge: false,
buldgeDirection: 'in',
buldgeFixed: true,
buldgeStrength: 0.3,
rippleDistortion: false,
rippleDistortionStrength: 0.2,
rippleDistortionSize: 0.5,
useNoise: false,
noiseSize: 0.4,
noiseFadeSize: 0.2,
noiseBlurStrength: 0.3,
noiseFadeColor: '#000000',
grid: false,
gridAddRGBDistortion: false,
gridSize: 1600,
gridMouseRadiusFactor: 0.4,
gridMouseStrengthFactor: 0.48,
gridMouseRelaxation: 0.9,
afterImage: false,
afterImageDumping: 0.75,
// Lightbox.
rlPath: 'content/rl',
useLightbox: true,
rlUseDeepLinking: true,
etc...
});
}
</script>The last step is to create a div with a unique ID that will act as the parent/holder for the slider and set the parentId option to point to it: parentId: 'myDiv'. This div can be added anywhere in your page.
<!-- Slider holder. -->
<div id="myDiv"></div>
To add multiple sliders just redo the steps explained above and make sure to change the instance to fwdfs1, fwdfs2, fwdfs3, etc... depending on how many sliders are added, also change the parentId to a different ID and change the sliderDataId to point to a different slider data container.
Please read the settings section to understand the slider configuration options.
Setup Slider Data
A slider data container is created by adding inside the page body a div with a unique ID and setting the display style to none, this will be used only as the slider data markup. This unique ID has to be added as the value of the sliderDataId option in the slider settings like this sliderDataId: 'sliderData'.
<!-- Slider data. -->
<div id="sliderData" style="display: none;">
<div>
<div data-src="media/thumbnails/image.jpg" data-width="900" data-height="600"></div>
<div data-rl-src="media/images/image-full.jpg"></div>
<div data-caption="">
<p class="caption-title">Item Title</p>
<p class="caption-desc">Item description text.</p>
</div>
<div data-rl-caption="">
<p class="fwdrl-title">Lightbox Title</p>
<p class="fwdrl-desc">Lightbox description text.</p>
</div>
</div>
... add as many items as you want ...
</div>
Each slider item is a group of child div elements. Adding items is done by adding inside the slider data div one or more groups of divs with data parameters explained below.
Slider item parameters
- data-src - required, the thumbnail media path (.jpg, .jpeg, .png, .webp) or a video file (.mp4) for inline video thumbnails.
- data-width - optional, the natural width of the thumbnail for aspect ratio calculation.
- data-height - optional, the natural height of the thumbnail for aspect ratio calculation.
- data-rl-src - optional, the lightbox media source. Supports images, self-hosted and external videos (.mp4, .m3u8), YouTube, Vimeo, audio (.mp3), iframes, and links. Set to none to disable lightbox for this item.
- data-rl-poster-src - optional, the poster image shown before the lightbox media loads.
- data-rl-subtitle-src - optional, path to a .vtt subtitle file for video items.
- data-rl-vast-src - optional, VAST ad tag URL for pre-roll video ads.
- data-rl-password - optional, MD5 hash of the password to protect the lightbox media.
- data-caption - optional, the caption container shown under the slider thumbnail. Use child p.caption-title and p.caption-desc for title and description.
- data-rl-caption - optional, the caption shown inside the lightbox. Use child p.fwdrl-title and p.fwdrl-desc for title and description.
Modify code
Filmstrip Slider is using VITE to build the final JavaScript file.
Settings
Filmstrip Slider has many options that allow you to customize its features. They are added directly in the slider constructor as it can be seen in the installation section.
Example
<script type="text/javascript">
if(document.readyState == 'complete'){
fwdSetupFSS();
}else{
document.addEventListener('DOMContentLoaded', ()=>{
fwdSetupFSS();
});
}
function fwdSetupFSS(){
new FWDFS({
// Main settings.
instance: 'fwdfs0',
display: 'responsive',
parentId: 'myDiv',
sliderDataId: 'sliderData',
initializeWhenVisible: false,
etc...
})
}
</script>instance
Type: (String) - default: unset
The slider instance name, this is used to call the API. In the example files the instance name is set to fwdfs0, if you are using multiple sliders just change the instance to fwdfs1, fwdfs2, fwdfs3, etc...
parentId
Type: (String) - default: unset
The slider holder/div ID. Make sure this has a unique ID. The div can be added anywhere in your page.
sliderDataId
Type: (String) - default: unset
The slider data div ID. Please read the Setup Slider Data section for more info.
display
Type: (String) - default: responsive
Slider display type.
- responsive - displays the slider in responsive mode based on the maxWidth and maxHeight settings.
- afterparent - displays the slider based on the parent div width and height.
initializeWhenVisible
Type: (Boolean) - default: false
Lazy initialization on scroll. When set to true the slider will not be initialized until it is scrolled into view. Useful for sliders placed below the fold.
maxWidth
Type: (Number) - default: 4920
The slider maximum width in px.
maxHeight
Type: (Number) - default: 1000
The slider maximum height in px.
autoScaleStartWidth
Type: (Number) - default: 1200
The slider width (in pixels) at which the container will begin adjusting its height proportionally. Only takes effect if autoScale is enabled.
autoScale
Type: (Boolean) - default: true
If true the slider height will always be proportional to the slider width. If false the height will be fixed based on the maxHeight property.
stats
Type: (Boolean) - default: false
Show the performance stats (FPS/memory usage). Set to true for development purposes only.
gui
Type: (Boolean) - default: false
Show the live GUI settings panel for real-time tweaking during development. Set to false in production.
showPreloader
Type: (Boolean) - default: true
Show the preloader animation while the slider initializes.
preloaderColor
Type: (String) - default: #FFFFFF
The preloader color in HEX or RGB.
backgroundColor
Type: (String) - default: #000000
The main background color in HEX or RGBA.
useStrip
Type: (Boolean) - default: true
Show the film strip decorative band behind the items.
stripColor
Type: (String) - default: #050505
The color of the film strip band in HEX or RGB.
infinite
Type: (Boolean) - default: true
Enable infinite loop scrolling. When true the slider wraps around continuously.
gap
Type: (Number) - default: 0
The gap/spacing between items in 3D units. Increase this value to add space between slides.
planeWidth
Type: (Number) - default: 4.0
The width of each item plane in 3D units.
planeHeight
Type: (Number) - default: 2.8
The height of each item plane in 3D units.
snap
Type: (Boolean) - default: true
Enable item snapping. When true the slider will snap to the nearest item after scrolling stops.
randomizeImages
Type: (Boolean) - default: false
Randomize the order of items on initialization.
useIntro
Type: (Boolean) - default: true
Play the intro animation when the slider first loads. When false the slider appears instantly in its final position.
introStartOffsetItems
Type: (Number) - default: 2.5
The number of item-widths the strip is offset from its final position at the start of the intro animation.
introStartSmoothTime
Type: (Number) - default: 0.55
The smooth time (in seconds) of the intro animation. Lower values result in a snappier intro.
showMaskGradient
Type: (Boolean) - default: false
Show a left and right gradient overlay that fades items near the edges of the slider.
useCaption
Type: (Boolean) - default: true
Enable captions for items that have data-caption defined in the slider data.
captionPosition
Type: (String) - default: sticky
Controls how the caption is positioned relative to the active item.
- sticky - the caption stays attached to the active item.
- bottom - the caption is placed at the bottom of the slider.
useBlackAndWhite
Type: (Boolean) - default: false
Apply a black and white desaturation shader to all item textures for a monochrome cinematic look.
hoverBurnIntensity
Type: (Number) - default: 1.0
The intensity of the burn/bloom effect applied to an item on hover. Set to 0 to disable.
hoverType
Type: (String) - default: zoomAndBurn
The hover interaction style applied to items.
- zoomAndBurn - the item scales up and applies a burn effect on hover.
- burn - only the burn effect is applied, no scaling.
- zoom - only the scale-up effect is applied.
opacityStrength
Type: (Number) - default: 0.5
Controls how strongly non-active items fade out. A value of 0 means all items are fully opaque, 1 means maximum fade for non-active items.
opacityFadeStartItems
Type: (Number) - default: 0.45
The distance in item-widths from the active item at which the fade effect starts.
scrollSpeedStrength
Type: (Number) - default: 1
Multiplier for the scroll/drag speed. Higher values make the strip scroll faster.
scrollScaleStrength
Type: (Number) - default: 0
How much items scale down during fast scrolling. Set to 0 to disable the effect.
curveDistortionStrength
Type: (Number) - default: 0
The strength of the 3D curve distortion applied to the strip. Higher values create a more pronounced arc.
curveCenterPosition
Type: (Number) - default: 0.373
The center position of the curve effect as a normalized value (0 to 1).
strongCurvedFlatSize
Type: (Number) - default: 2
Controls how many items near the center remain flat when the curve effect is active.
liquidDistortionStrength
Type: (Number) - default: 0
The strength of the liquid/fluid distortion applied to item transitions. Set to 0 to disable.
meshCenterOffsetX
Type: (Number) - default: 0
Horizontal offset of the entire strip mesh in 3D units. Use this to shift the strip left or right.
cameraPositionX
Type: (Number) - default: 0
The camera horizontal offset from its default position.
cameraPositionY
Type: (Number) - default: 0
The camera vertical offset from its default position.
x
Type: (Number) - default: 0
The camera X position in 3D space.
y
Type: (Number) - default: 0
The camera Y position in 3D space.
z
Type: (Number) - default: 0
The camera Z position in 3D space. Higher positive values move the camera further back.
rotationX
Type: (Number) - default: 0
The camera rotation around the X axis in radians.
rotationY
Type: (Number) - default: 0
The camera rotation around the Y axis in radians.
useLights
Type: (Boolean) - default: false
Enable scene lighting. When true a directional light with specular and Fresnel effects is applied to item surfaces, creating a more three-dimensional look.
lightColor
Type: (String) - default: #ffffff
The color of the scene light in HEX.
lightIntensity
Type: (Number) - default: 0.72
The intensity/brightness of the scene light. A value from 0 to 1.
lightAmbient
Type: (Number) - default: 0.5
The ambient light level applied uniformly to all item surfaces. A value from 0 to 1.
lightSpecularStrength
Type: (Number) - default: 0.14
The strength of the specular highlight effect on item surfaces.
lightSpecularPower
Type: (Number) - default: 30.0
The power/sharpness of the specular highlight. Higher values produce a tighter, more focused highlight.
lightFresnelStrength
Type: (Number) - default: 0.09
The strength of the Fresnel rim lighting effect on item edges.
lightFresnelPower
Type: (Number) - default: 2.4
The power/spread of the Fresnel rim lighting effect.
lightDirectionX
Type: (Number) - default: -0.22
The light direction X component (normalized vector).
lightDirectionY
Type: (Number) - default: 0.52
The light direction Y component (normalized vector).
lightDirectionZ
Type: (Number) - default: 1.0
The light direction Z component (normalized vector).
antialias
Type: (Boolean) - default: true
Enable post-processing anti-aliasing for a smoother visual experience.
rgbEdge
Type: (Boolean) - default: false
Enable the RGB edge detection post-processing effect that highlights item edges with a color shift.
rgbEdgeStrength
Type: (Number) - default: 0
The strength of the RGB edge effect.
rgbEdgeMax
Type: (Number) - default: 0
The maximum range of the RGB edge effect.
waveFrequency
Type: (Number) - default: 0.1
The frequency of the wave shader effect. Set to 0 to disable.
waveAmplitude
Type: (Number) - default: 0.02
The amplitude/height of the wave shader effect.
mouseRippleStrength
Type: (Number) - default: 1
The strength of the mouse-driven ripple distortion on item surfaces. Set to 0 to disable.
glitch
Type: (Boolean) - default: false
Enable the glitch post-processing effect for a stylized digital distortion look.
buldge
Type: (Boolean) - default: false
Enable the bulge/pinch lens distortion post-processing effect.
buldgeDirection
Type: (String) - default: in
The direction of the bulge effect. Accepts in (bulge inward/pinch) or out (bulge outward).
buldgeFixed
Type: (Boolean) - default: true
When true the bulge effect is centered at a fixed screen position. When false it follows the mouse.
buldgeStrength
Type: (Number) - default: 0.3
The strength of the bulge/pinch distortion effect.
rippleDistortion
Type: (Boolean) - default: false
Enable the ripple distortion post-processing effect that creates a water-like wave pattern across items.
rippleDistortionStrength
Type: (Number) - default: 0.2
The strength of the ripple distortion effect.
rippleDistortionSize
Type: (Number) - default: 0.5
The size/scale of the ripple pattern.
useNoise
Type: (Boolean) - default: false
Enable a noise/grain overlay shader on item textures.
noiseSize
Type: (Number) - default: 0
The size/scale of the noise grain pattern.
noiseFadeSize
Type: (Number) - default: 0
The size of the fade zone at the edges of the noise effect.
noiseBlurStrength
Type: (Number) - default: 0.2
The blur strength applied to the noise effect.
noiseFadeColor
Type: (String) - default: #000000
The color used for the noise fade effect at item edges.
grid
Type: (Boolean) - default: false
Enable the interactive grid post-processing effect.
gridAddRGBDistortion
Type: (Boolean) - default: false
Add an RGB channel shift/distortion to the grid post-processing effect.
gridSize
Type: (Number) - default: 3
The size of the grid cells. Maximum value is 400.
gridMouseRadiusFactor
Type: (Number) - default: 0.25
The radius of the mouse interaction area on the grid. Maximum value is 2.
gridMouseStrengthFactor
Type: (Number) - default: 1
The strength of the mouse distortion on the grid. Maximum value is 2.
gridMouseRelaxation
Type: (Number) - default: 0.9
The relaxation/damping factor of the grid mouse effect. Maximum value is 1. Higher values make the effect dissipate more slowly.
afterImage
Type: (Boolean) - default: false
Enable the after-image/motion-trail post-processing effect.
afterImageDumping
Type: (Number) - default: 0.75
The decay/dumping factor of the after-image trail. Higher values create a longer, more persistent trail.
useLightbox
Type: (Boolean) - default: true
Enable the lightbox (FWDRL component). When true clicking an item opens its lightbox media. Requires rlPath to be set correctly.
rlPath
Type: (String) - default: content/rl
The path to the Responsive Lightbox (FWDRL) content folder. This must point to the folder containing the RL assets.
rlUseDeepLinking
Type: (Boolean) - default: false
Enable URL deep linking for lightbox items, allowing direct links to a specific item in the lightbox.
rlBackgroundColor
Type: (String) - default: rgba(0,0,0,.99)
The overlay background color of the lightbox.
rlItemBackgroundColor
Type: (String) - default: #212121
The background color behind each media item in the lightbox.
rlDefaultItemWidth
Type: (Number) - default: 1527
The default lightbox item content width in px.
rlDefaultItemHeight
Type: (Number) - default: 859
The default lightbox item content height in px.
rlItemOffsetHeight
Type: (Number) - default: 37
The height offset reserved at the bottom of the lightbox item for the controls bar.
rlItemBorderSize
Type: (Number) - default: 0
The border size around the lightbox item in px.
rlItemBorderColor
Type: (String) - default: #FFFFFF
The border color around the lightbox item.
rlMaxZoom
Type: (Number) - default: 1.2
The maximum zoom level allowed for image items in the lightbox.
rlPreloaderBkColor
Type: (String) - default: #2e2e2e
The background color of the lightbox preloader circle.
rlPreloaderFillColor
Type: (String) - default: #FFFFFF
The fill/stroke color of the lightbox preloader circle.
rlButtonsAlignment
Type: (String) - default: in
The alignment of the lightbox navigation buttons. Accepts in (inside the item) or out (outside the item).
rlButtonsHideDelay
Type: (Number) - default: 5
The delay in seconds before the lightbox buttons auto-hide after inactivity.
rlMediaLazyLoading
Type: (Boolean) - default: true
Enable lazy loading of lightbox media — each item loads only when opened.
rlUseDrag
Type: (Boolean) - default: true
Enable drag/swipe navigation in the lightbox.
rlUseAsModal
Type: (Boolean) - default: false
Open the lightbox as a modal that prevents closing by clicking the background overlay.
rlShowSlideShowButton
Type: (Boolean) - default: true
Show the slideshow play button in the lightbox controls.
rlSlideShowAutoPlay
Type: (Boolean) - default: false
Auto-start the lightbox slideshow when the lightbox opens.
rlSlideShowDelay
Type: (Number) - default: 6
The delay in seconds between each item during the lightbox slideshow.
rlUseKeyboard
Type: (Boolean) - default: true
Enable keyboard navigation in the lightbox (arrow keys to navigate, Escape to close).
rlUseDoubleClick
Type: (Boolean) - default: true
Enable double-click to zoom in/out on image items inside the lightbox.
rlShowCloseButton
Type: (Boolean) - default: true
Show the close button in the lightbox.
rlShowFullscreenButton
Type: (Boolean) - default: true
Show the fullscreen toggle button in the lightbox.
rlShowZoomButton
Type: (Boolean) - default: true
Show the zoom button for image items in the lightbox.
rlShowCounter
Type: (Boolean) - default: true
Show the item counter (e.g., "3 / 12") in the lightbox.
rlShowNextAndPrevBtns
Type: (Boolean) - default: true
Show the next and previous navigation buttons in the lightbox.
rlSpaceBetweenBtns
Type: (Number) - default: 8
The space in px between buttons in the lightbox controls bar.
rlButtonsOffsetIn
Type: (Number) - default: 10
The offset in px of buttons when positioned inside the item (rlButtonsAlignment: 'in').
rlButtonsOffsetOut
Type: (Number) - default: 10
The offset in px of buttons when positioned outside the item (rlButtonsAlignment: 'out').
rlShareButtons
Type: (Array) - default: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg', 'blogger']
The share buttons to display in the lightbox share panel. Remove entries you do not need. Set to an empty array [] to disable sharing.
rlShareText
Type: (String) - default: Share on
The header text displayed in the lightbox share panel.
rlSharedURL
Type: (String) - default: deeplink
The URL shared by the share buttons. Use deeplink to share the current deep-linked URL, or provide a custom URL string.
rlShowThumbnails
Type: (Boolean) - default: true
Show the thumbnail strip at the bottom of the lightbox.
rlShowThumbnailsIcon
Type: (Boolean) - default: true
Show a play icon overlay on video thumbnails in the lightbox thumbnail strip.
rlThumbnailsHeight
Type: (Number) - default: 80
The height of the lightbox thumbnail strip in px.
rlThumbnailsOverlayColor
Type: (String) - default: rgba(0,0,0,.4)
The overlay color applied to non-active thumbnails in the lightbox strip.
rlThumbnailsBorderSize
Type: (Number) - default: 2
The border size of the active thumbnail in the lightbox strip in px.
rlThumbnailsBorderColor
Type: (String) - default: #FFFFFF
The border color of the active thumbnail in the lightbox strip.
rlSpaceBetweenThumbnailsAndItem
Type: (Number) - default: 10
The vertical gap in px between the lightbox item and the thumbnail strip.
rlThumbnailsOffsetBottom
Type: (Number) - default: 10
The offset in px of the lightbox thumbnail strip from the bottom of the lightbox window.
rlSpaceBetweenThumbnails
Type: (Number) - default: 5
The gap in px between individual thumbnails in the lightbox thumbnail strip.
rlShowCaption
Type: (Boolean) - default: true
Show the caption inside the lightbox for items that have data-rl-caption defined.
rlCaptionPosition
Type: (String) - default: bottomout
The caption position inside the lightbox. Accepts bottomout (below the item) or bottomin (overlaid at the bottom of the item).
rlShowCaptionOnSmallScreens
Type: (Boolean) - default: false
Show the lightbox caption on small/mobile screens.
rlCaptionAnimationType
Type: (String) - default: motion
The animation style used to show/hide the lightbox caption. Accepts motion (slide in) or fade.
rlUseVideo
Type: (Boolean) - default: true
Enable video playback support in the lightbox.
rlFillEntireScreenWithPoster
Type: (Boolean) - default: true
Scale the video poster image to fill the entire lightbox screen before the video plays.
rlVolume
Type: (Number) - default: 1
The initial volume for video/audio items in the lightbox. A value from 0 to 1.
rlVideoAutoPlay
Type: (Boolean) - default: false
Auto-play the video when the lightbox opens. Note: browsers may block auto-play with sound.
rlNextVideoAutoPlay
Type: (Boolean) - default: false
Auto-play the next video item when the current video finishes playing.
rlVideoAutoPlayText
Type: (String) - default: Click to unmute
The label shown on the unmute overlay when a video auto-plays muted due to browser restrictions.
rlShowLogo
Type: (Boolean) - default: true
Show the logo overlay inside the lightbox video player.
rlLogoPath
Type: (String) - default: content/rl/content/evp/skin/logo.png
The path to the logo image displayed inside the lightbox video player.
rlLogoLink
Type: (String) - default: unset
A URL that the logo links to when clicked inside the lightbox video player.
Methods
Methods are functions that can be called via the API to execute certain actions.
JavaScript methods look like fwdfs0.methodName( /* arguments */ ), please note that fwdfs0 is the slider instance name. If you are using multiple sliders don't forget to set a unique instance for each one like fwdfs1, fwdfs2, etc...
goToItem
.goToItem(itemId:Number)
Go to a specific item by its index. The counting starts from 0.
destroy
.destroy()
Destroy the slider instance and remove it from the DOM.
Events
Filmstrip Slider has several events, they are added via the addListener method accessed via the instance name.
The events must be registered after the API is ready.
// API.
let fwdfssAPI = setInterval(() =>{
if(window['fwdfs0']){
console.log('FWDFS API ready');
clearInterval(fwdfssAPI);
// Register the ITEM_UPDATE event.
fwdfs0.addListener(FWDFS.ITEM_UPDATE, onItemUpdate);
}
}, 100);
// Called when the active item changes.
function onItemUpdate(e){
console.log(e);
}
FWDFS.ITEM_UPDATE
FWDFS.ITEM_UPDATE
Dispatched when the active item changes. The event object contains data about the current item.
FWDFS.RL_SHOW_START
FWDFS.RL_SHOW_START
Dispatched when the lightbox starts its show animation.
FWDFS.RL_HIDE_COMPLETE
FWDFS.RL_HIDE_COMPLETE
Dispatched when the lightbox has completely finished hiding.
FWDFS.ERROR
FWDFS.ERROR
Dispatched when an error occurs, such as failing to find the slider data or media.
Notes
Filmstrip Slider was created as a polished, high-performance media experience for the modern web, combining WebGL rendering, flexible content support, and a practical API that fits real production use.
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.