JavaScript Documentation

Documentation for the standalone Izubizu Slider JavaScript version, including setup, slider data, transition types, text transition types, settings, methods, and events.

Getting Started

Izubizu Slider is a cinematic WebGL media slider for images and MP4 videos. It runs in the browser using JavaScript, Three.js, GLSL shaders, post processing, and HTML captions.

The standalone package is configured directly in an HTML page and supports 19 transition types plus 16 text transition types without requiring PHP or a framework.

Please note that the slider must run from an HTTP or HTTPS server. Opening the files directly from disk is not supported.

For best visual quality and performance, use optimized media. Large textures, long videos, and aggressive shader settings can increase GPU cost, especially on mobile devices.

Installation

The quickest reference is the root index.html file or any preset page in the demo folder, since those show real Izubizu Slider transition and caption setups.

Include the slider stylesheet, load FWDIS.js, then initialize the slider after the document is ready, just like the preset demo pages.


<script>
	if(document.readyState == 'complete'){
		setupIS();
	}else{
		document.addEventListener('DOMContentLoaded', () => {
			setupIS();
		});
	}

	function setupIS(){

		new FWDIS({

		// Main settings.
		instance: 'fwdis0',
		parentId: 'myDiv',
		displayType: 'afterparent',
		sliderDataId: 'sliderData',
		initializeWhenVisible: false,
		paralax: true,
		maxWidth: 1920,
		maxHeight: 900,
		autoScaleStartWidth: 1200,
		autoScale: true,
		infinite: true,
		gui: false,
		showPreloader: true,
		preloaderColor: '#ffffff',
		backgroundColor: '#000000',
		dragFriction: 0.84,
		dragSpeed: 1,
		showMaskGradient: false,
		useCaption: true,

		// Buttons
		showNextAndPrevButtons: true,
		nextAndPrevButtonsHideDelay: 2,
		nextAndPrevButtonsOffset: 20,
		nextAndPrevHideAndShowOffset: 10,
		nextAndPrevButtonsSize: 50,
		nextAndPrevButtonsBackgroundColor: 'rgba(0,0,0,.4)',
		nextAndPrevButtonsBackgroundColorHover: 'rgba(0,0,0,.8)',
		nextAndPrevButtonsIconColor: '#888888',
		nextAndPrevButtonsIconColorHover: '#FFFFFF',

		// Slideshow
		showSlideShow: true,
		sideShowIconPostion: 'bottomright',
		slideshowDalay: 6,
		slideshowAutoPlay: true,
		slideshowBkColor: 'rgba(136,136,136,1)',
		slideshowFillColor: '#FFFFFF',
		slideshowRadius: 12,
		slideshowStrokeSize: 3,
		slideshowOffsetX: 20,
		slideshowOffsetY: 20,

		// Hand helper
		showHandCursorHelper: true,
		infoHelpHTML: 'Holdanddrag',
		handCursorHelperSpriteColor: '#ffffff',
		handCursorHelperTextColor: '#ffffff',
		infoHelpRadius: 50,
		handShowDelay: 1.5,
		hideAfterCount: 2,

		// Post processing.
		antialias: true,
		waveFrequency: 0.1,
		waveAmplitude: 0.02,
		rgbShiftStrength: 0,
		useNoise: false,
		noiseSize: 0.55,
		noiseFadeSize: 0.2,
		noiseBlurStrength: 0.1,
		noiseFadeColor: '#000000',
		flowmapRGBShift: true,
		flowmapRGBShiftAmount: 0.05,
		flowmapRGBShiftStrength: 1,
		flowmapStrength: 1.2,
		flowmapRadius: 0.1,
		flowmapSensitivity: 3,
		flowmapForce: 14.0,
		flowmapFalloff: 1.8,

		});
	}
</script>

Add a holder element anywhere in the page body and point parentId to that element.

<div id="myDiv" style="width:100vw; height:100vh;"></div>

If you need multiple sliders on the same page, use unique values for instance, parentId, and sliderDataId for each one.

Setup slider

The slider data is regular HTML markup placed in a hidden container. The sliderDataId setting must point to that container, and each item can define its own transition type and caption text transition type.

<div id="sliderData" style="display: none;">

	<div>
		<div data-src="media/images/1.jpg" data-width="1920" data-height="1280" data-helper-sprite-color="#ffffff" data-helper-text-color="#ffffff" data-noise-pass-color="#000000" data-transition-type="sinusoidal"></div>
		<div data-caption="">
			<p class="caption-title" data-text-transition-type="blur" data-color="#ffffff"><span>Momentum</span><span>Cycling</span></p>
			<p class="caption-desc" data-color="#cccccc" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
		</div>
	</div>

	<div>
		<div data-src="media/videos/1.mp4" data-width="1920" data-height="1080" data-helper-sprite-color="#ffffff" data-helper-text-color="#ffffff" data-noise-pass-color="#000000" data-transition-type="linear"></div>
		<div data-caption="">
			<p class="caption-title" data-text-transition-type="flicker-effect" data-color="#ffffff"><span>Izubizu</span><span>Slider</span></p>
			<p class="caption-desc" data-color="#ffffff" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
		</div>
	</div>

	<!-- Add as many items as needed. -->

</div>

Each slider item uses an outer wrapper and a nested media element that includes at least the source path, width, height, and optionally a per-item transition type.

Slider item parameters

  • data-src - required media path. Supported formats include images and MP4 video.
  • data-width - required natural media width in pixels.
  • data-height - required natural media height in pixels.
  • data-transition-type - optional per-item transition mode. Available types: linear, sinusoidal, opacity, pixelation, whater, radial, velvet-drift, night-pulse, noise, pickaboo, silver-current, emerald-static, pageFlip, crystal-veil, lunar-bloom, ripple, urban-spark, solar-grain, neon-horizon.
  • data-helper-sprite-color - optional per-item helper sprite color override.
  • data-helper-text-color - optional per-item helper text color override.
  • data-noise-pass-color - optional per-item noise fade color override.

Slider item caption

Captions are optional. They are regular HTML and can contain your own classes, links, styling, and per-caption text transition types.

<div>
	<div data-src="media/images/1.jpg" data-width="1920" data-height="1280" data-transition-type="sinusoidal"></div>
	<div data-caption="">
		<p class="caption-title" data-text-transition-type="blur" data-color="#ffffff"><span>Momentum</span><span>Cycling</span></p>
		<p class="caption-desc" data-color="#cccccc" data-underline-color="#ffffff"><a href="https://fwdapps.net/" target="_blank">View Case</a></p>
	</div>
</div>

Available caption text transition types include flicker-effect, blur, opacity, slide, words-slide, scramble-then-lock, blur-opacity-random-letters, split-line-opposite, words-clip-reveal, linear, neon-flicker-on, thunder-drop, neon-flicker-on-letters, pulse-tunnel, chaos-orbit, and meteor-strike.

Modify code

The source package is built with Vite. Use the source files if you want to customize shaders, transitions, caption behavior, or rebuild the distributable JavaScript.

Settings

All settings are passed directly to the FWDIS constructor. The JavaScript version uses real booleans and numbers, so use values like true, false, and numeric literals instead of string-based toggles.

The example below mirrors the initialization pattern used in preset-1.html, including the document-ready wrapper and the exact slider settings block.

Example

if(document.readyState == 'complete'){
	setupIS();
}else{
	document.addEventListener('DOMContentLoaded', () => {
		setupIS();
	});
}

function setupIS(){

	new FWDIS({
	instance: 'fwdis0',
	parentId: 'myDiv',
	displayType: 'afterparent',
	sliderDataId: 'sliderData',
	initializeWhenVisible: false,
	paralax: true,
	maxWidth: 1920,
	maxHeight: 900,
	autoScaleStartWidth: 1200,
	autoScale: true,
	infinite: true,
	gui: false,
	showPreloader: true,
	preloaderColor: '#ffffff',
	backgroundColor: '#000000',
	dragFriction: 0.84,
	dragSpeed: 1,
	showMaskGradient: false,
	useCaption: true,
	showNextAndPrevButtons: true,
	nextAndPrevButtonsHideDelay: 2,
	nextAndPrevButtonsOffset: 20,
	nextAndPrevHideAndShowOffset: 10,
	nextAndPrevButtonsSize: 50,
	nextAndPrevButtonsBackgroundColor: 'rgba(0,0,0,.4)',
	nextAndPrevButtonsBackgroundColorHover: 'rgba(0,0,0,.8)',
	nextAndPrevButtonsIconColor: '#888888',
	nextAndPrevButtonsIconColorHover: '#FFFFFF',
	showSlideShow: true,
	sideShowIconPostion: 'bottomright',
	slideshowDalay: 6,
	slideshowAutoPlay: true,
	slideshowBkColor: 'rgba(136,136,136,1)',
	slideshowFillColor: '#FFFFFF',
	slideshowRadius: 12,
	slideshowStrokeSize: 3,
	slideshowOffsetX: 20,
	slideshowOffsetY: 20,
	showHandCursorHelper: true,
	infoHelpHTML: 'Holdanddrag',
	handCursorHelperSpriteColor: '#ffffff',
	handCursorHelperTextColor: '#ffffff',
	infoHelpRadius: 50,
	handShowDelay: 1.5,
	hideAfterCount: 2,
	antialias: true,
	waveFrequency: 0.1,
	waveAmplitude: 0.02,
	rgbShiftStrength: 0,
	useNoise: false,
	noiseSize: 0.55,
	noiseFadeSize: 0.2,
	noiseBlurStrength: 0.1,
	noiseFadeColor: '#000000',
	flowmapRGBShift: true,
	flowmapRGBShiftAmount: 0.05,
	flowmapRGBShiftStrength: 1,
	flowmapStrength: 1.2,
	flowmapRadius: 0.1,
	flowmapSensitivity: 3,
	flowmapForce: 14.0,
	flowmapFalloff: 1.8,

	});
}

instance

Type: (String) - default: required

The global instance name used for API access, for example fwdis0.

parentId

Type: (String) - default: required

The holder element ID where the slider will be rendered.

displayType

Type: (String) - default: responsive

Accepted values are responsive and afterparent. Use afterparent when the slider should follow the size of its parent container.

sliderDataId

Type: (String) - default: required

The ID of the hidden markup container that stores the slider items.

initializeWhenVisible

Type: (Boolean) - default: false

Delays data setup until the slider enters the viewport.

paralax

Type: (Boolean) - default: false

Enables the vertical parallax effect while the slider is visible.

maxWidth

Type: (Number) - default: 1000

The maximum slider width in pixels.

maxHeight

Type: (Number) - default: 700

The maximum slider height in pixels.

autoScaleStartWidth

Type: (Number) - default: 1400

The breakpoint width where responsive height scaling reaches the full maxHeight value.

autoScale

Type: (Boolean) - default: true

When enabled in responsive mode, the slider height scales down smoothly as the available width becomes smaller.

infinite

Type: (Boolean) - default: false

Loops the slider continuously instead of stopping at the first and last item.

gui

Type: (Boolean) - default: true

Shows the live dat.GUI settings panel used for testing and tuning.

showPreloader

Type: (Boolean) - default: true

Shows the preloader while media and textures are loading.

preloaderColor

Type: (String) - default: #FFFFFF

The preloader accent color.

backgroundColor

Type: (String) - default: #1a1a1a

The slider background color. Transparent values are also supported.

dragFriction

Type: (Number) - default: 0.88

Controls how quickly drag momentum decays after the pointer is released. Lower values settle faster.

dragSpeed

Type: (Number) - default: 1

Controls how far the slider moves in response to drag input and release momentum.

showMaskGradient

Type: (Boolean) - default: true

Shows the top and bottom gradient mask overlays.

useCaption

Type: (Boolean) - default: true

Enables HTML captions read from the slider item markup.

showNextAndPrevButtons

Type: (Boolean) - default: false

Shows the previous and next navigation buttons on top of the slider.

nextAndPrevButtonsHideDelay

Type: (Number) - default: 2

The idle delay, in seconds, before the navigation buttons fade out.

nextAndPrevButtonsOffset

Type: (Number) - default: 20

The distance in pixels between the navigation buttons and the left and right edges of the slider.

nextAndPrevHideAndShowOffset

Type: (Number) - default: 10

The horizontal travel offset used when the navigation buttons animate in and out.

nextAndPrevButtonsSize

Type: (Number) - default: 50

The square button size, in pixels, used for both navigation buttons.

nextAndPrevButtonsBackgroundColor

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

The base background color of the previous and next buttons.

nextAndPrevButtonsBackgroundColorHover

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

The hover background color of the previous and next buttons.

nextAndPrevButtonsIconColor

Type: (String) - default: #888888

The default SVG icon color used inside the navigation buttons.

nextAndPrevButtonsIconColorHover

Type: (String) - default: #FFFFFF

The hover SVG icon color used inside the navigation buttons.

showSlideShow

Type: (Boolean) - default: false

Shows the circular slideshow progress indicator and enables the timed slide advance system.

sideShowIconPostion

Type: (String) - default: bottomright

Controls which corner is used for the slideshow indicator. Accepted values are topleft, topright, bottomleft, and bottomright.

slideshowDalay

Type: (Number) - default: 6

The slideshow duration, in seconds, before advancing to the next item.

slideshowAutoPlay

Type: (Boolean) - default: true

Starts the slideshow timer automatically after the intro and helper timing complete.

slideshowBkColor

Type: (String) - default: rgba(136,136,136,1)

The background stroke color of the circular slideshow indicator.

slideshowFillColor

Type: (String) - default: #FFFFFF

The animated progress stroke color of the circular slideshow indicator.

slideshowRadius

Type: (Number) - default: 12

The radius of the circular slideshow indicator.

slideshowStrokeSize

Type: (Number) - default: 3

The stroke width used for both circles in the slideshow indicator.

slideshowOffsetX

Type: (Number) - default: 20

The horizontal offset, in pixels, applied from the selected slideshow indicator corner.

slideshowOffsetY

Type: (Number) - default: 20

The vertical offset, in pixels, applied from the selected slideshow indicator corner.

showHandCursorHelper

Type: (Boolean) - default: true

Shows the hand helper overlay that teaches the drag interaction.

infoHelpHTML

Type: (String) - default: HOLD AND DRAG

The text displayed in the helper overlay.

handCursorHelperSpriteColor

Type: (String) - default: #ffffff

The helper hand sprite tint color. Individual items can override it in markup.

handCursorHelperTextColor

Type: (String) - default: #ffffff

The helper text color. Individual items can override it in markup.

infoHelpRadius

Type: (Number) - default: 72

The helper text orbit radius around the hand sprite.

handShowDelay

Type: (Number) - default: 1

The delay, in seconds, before the helper is shown.

hideAfterCount

Type: (Number) - default: 4

Hides the helper permanently after the user completes this many drag gestures.

antialias

Type: (Boolean) - default: true

Enables FXAA-based smoothing for the final post-processing output.

waveFrequency

Type: (Number) - default: 0.1

The frequency of the wave distortion.

waveAmplitude

Type: (Number) - default: 0.5

The strength of the wave distortion.

rgbShiftStrength

Type: (Number) - default: 0

The base RGB shift amount applied during post processing.

useNoise

Type: (Boolean) - default: true

Enables the noise pass.

noiseSize

Type: (Number) - default: 0

The size of the noise breakup pattern.

noiseFadeSize

Type: (Number) - default: 0

The width of the fade area used by the noise pass.

noiseBlurStrength

Type: (Number) - default: 0.2

The blur intensity inside the noise pass.

noiseFadeColor

Type: (String) - default: #000000

The fade color used by the noise pass. Individual items can override it with data-noise-pass-color.

flowmapRGBShift

Type: (Boolean) - default: false

Enables extra RGB separation driven by the flowmap interaction.

flowmapRGBShiftAmount

Type: (Number) - default: 0.008

The size of the flowmap RGB separation offset.

flowmapRGBShiftStrength

Type: (Number) - default: 1

The multiplier applied to the flowmap RGB shift effect.

flowmapStrength

Type: (Number) - default: 1

The main strength of the flowmap distortion.

flowmapRadius

Type: (Number) - default: 0.12

The radius of each flowmap stamp.

flowmapSensitivity

Type: (Number) - default: 1

Controls how responsive the flowmap is to pointer movement.

flowmapForce

Type: (Number) - default: 2.5

The force applied to the flowmap stamps.

flowmapFalloff

Type: (Number) - default: 1.8

The falloff curve of each flowmap stamp.

Methods

Methods are called on the slider instance, for example fwdis0.destroy().

destroy

.destroy()

Destroys the slider instance and removes its listeners and rendering resources.

Events

Events are registered through addEventListener on the instance after the API becomes available.

let fwdisAPI = setInterval(() => {
	if (window['fwdis0']) {
		clearInterval(fwdisAPI);

		fwdis0.addEventListener(FWDIS.ITEM_UPDATE, onItemUpdate);
		fwdis0.addEventListener(FWDIS.ERROR, onError);
	}
}, 100);

function onItemUpdate(event) {
	console.log(event);
}

function onError(event) {
	console.log(event);
}

FWDIS.ITEM_UPDATE

FWDIS.ITEM_UPDATE

Dispatched while the active slider item state is changing.

FWDIS.ERROR

FWDIS.ERROR

Dispatched when the slider encounters a runtime or data error.

FWDIS.MINIMIZE

FWDIS.MINIMIZE

Dispatched when the current item leaves the maximized state.

FWDIS.MAXIMIZE

FWDIS.MAXIMIZE

Dispatched when an item becomes the active maximized item.

Notes

Izubizu Slider is designed as a cinematic WebGL presentation component. It combines shader-based transitions, media textures, post processing, and HTML overlays, so final results depend heavily on media quality and the tuning of the settings above.

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

© Copyright FWDesign