JavaScript Documentation

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

Getting Started

Noise Slider Slider, a powerful, responsive, and extremely customizable, versatile slider 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 slider 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 to your app size.

Please note that the mettrix are units so visual aproximation is needed, since the slider 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 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/FWDNSC.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'){
		fwdnscSetupSlider();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdnscSetupSlider();
		});
	}

	function fwdnscSetupSlider(){
		
		new FWDNSC({
                
			// Main settings.  
			instance: 'fwdnsc0',
			parentId: 'myDiv',
			displayType: 'afterParent',
			sliderDataId: 'sliderData',
			initializeWhenVisible: 'no',
			paralax: 'yes',
			maxWidth: 1920,
			maxHeight: 1000,
			stopScrollingForPx: 500,
			autoScale: 'yes',
			stats: 'no',
			gui: 'no',
			showPreloader: 'yes',
			preloaderColor: '#FFFFFF',
			backgroundColor: '#000000',
			infinite: 'yes',
			showMaskGradient: 'no',
			useCaption: 'yes',
			useBlackAndWhite: 'no',
			snap: 'yes',
			useCameraAnimation: 'yes',
			opacityStrength: 1,
			rgbShiftStrength: 0,
			planeWidth: 1.8,
			planeHeight: 1.4,
			scrollSpeedStrength: 0.3,
			meshScrollScaleStrength: 1,
			scrollScaleStrength: 1,
			defaultCurveDistortionStrength: 0.04,
			curveDistortionStrength: 2,
			mouseFollowStrength: 0.3,
			mouseFollowEasingStrength: 0.3,
			sliderCurveStrentgh: 0.3,
			gap: 0,
			horizontalX: 0,
			horizontalY: 0.03,
			horizontalZ: 0,
			horizontalRotationX: 0,
			horizontalRotationY: 0,
			horizontalRotationZ: 0,
			noiseAmplitude: 0,
			noiseFrequency: 0,
			noiseSpeed: 0.6,

			// Noise effect
			noiseSize: 0.3,
			noiseFadeSize: 0.15,
			noiseBlurStrength: 0.2,
			noiseFadeColor: '#000000',

			// Controller 
			showNextAndPrevButtons: 'yes',
			showNextAndPrevButtonsOnMobile: 'yes',
			buttonsNormalColor: '#000000',
			buttonsSelectedColor: '#ffffff',
			buttonsSize: 46,

		});
		
	}
</script>

The last step adding the slider is to create a div with an unique ID that will act as the parent/holder for the slider and set the parentId option to point to the div id ex: 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 fwdnsc1, fwdnsc2, fwdnsc3, etc... depending on how many sliders are added, also change the parentId to a different ID and if you want add a different gallery by also change the sliderDataId to point to a different gallery.

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

A 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 gallery 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 gallery. -->
<div id="sliderData" style="display: none;">

	<div data-src="media/videos/2.mp4" data-width="950" data-height="540" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<p class="fwdnsc caption-title"><span>Noise Slider Carousel</p>
		</div>
	</div> 

	<div data-src="media/images/1.png" data-width="900" data-height="600" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<p class="fwdnsc caption-title">Post Processing</p>
		</div>
	</div>

	<div data-src="media/images/2.png" data-width="900" data-height="600" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<p class="fwdnsc caption-title"><span>Video Integration</p>
		</div>
	</div>
							
	.... etc add as many as you need!

</div>

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

Gallery item parameters

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

Gallery item caption

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

<div data-src="media/images/1.png" data-width="900" data-height="600" data-url="https://fwdapps.net" data-target="_blank">
	<div data-caption="">
		<p class="fwdnsc caption-title">Noise Slider Slider</p>
	</div>
</div>

Modify code

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

Settings

Noise Slider Slider has many options that allows to customize it's 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'){
		fwdnscSetupSlider();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			fwdnscSetupSlider();
		});
	}

	function fwdnscSetupSlider(){

		new FWDNSC({ 

			// Main settings.  
			instance: 'fwdnsc0',
			displayType: 'responsive',
			parentId: 'myDiv',
			sliderDataId: 'sliderData',
			initializeWhenVisible: 'yes',
			etc...
			
		})
	}
</script>

instance

Type: (String) - default: unset

The slider instance name, this is used to call the API. In the examples files the instance name is set to fwdnsc0, if you are using multiple sliders instances just change the instance to fwdnsc1, fwdnsc2, fwdnsc3, etc...

parentId

Type: (String) - default: unset

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

Slider display type.

  • responsive - displays the slider in responsive type based on the maxWidth and maxHeight settings.
  • afterparent - displays the slider based on the parent width and height.

sliderDataId

Type: (String) - default: unset

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

initializeWhenVisible

Type: (String) - default: yes

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

paralax

Type: (String) - default: yes

This can be yes or no, ads paralax scroll effect.

maxWidth

Type: (Number) - default: 1920

The slider maximum width in px.

maxWidth

Type: (Number) - default: 1920

The slider maximum width in px.

maxHeight

Type: (Number) - default: 800

The slider maximum height in px.

stopScrollingForPx

Type: (Number) - default: 0

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

autoScale

Type: (String) - default: yes

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

antialias

Type: (String) - default: yes

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

stats

Type: (String) - default: yes

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

gui

Type: (String) - default: yes

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

showPreloader

Type: (String) - default: yes

This can be yes or no, show the preloader.

preloaderColor

Type: (String) - default: #FFFFFF

The preloader color in HEX or RGB.

backgroundColor

Type: (String) - default: #000000

The main background color in HEX or RGB.

infinite

Type: (String) - default: yes

This can be yes or no, based on the type this allows infinte scrolling.

showMaskGradient

Type: (String) - default: yes

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

useCaption

Type: (String) - default: yes

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

useBlackAndWhite

Type: (String) - default: yes

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

snap

Type: (Number) - default: yes

This can be yes or no, snaps the colsest mesh/item to the center.

useCameraAnimation

Type: (String) - default: yes

This can be yes or no, ads intro camera animation.

opacityStrength

Type: (Number) - default: yes

This can be yes or no, sets all meshes/items except the center/focus opacity.

planeWidth

Type: (Number) - default: 3.8

The mesh/plane item width.

planeHeight

Type: (Number) - default: 2.4

The mesh/plane item height.

scrollSpeedStrength

Type: (Number) - default: 0.6

The scroll/drag speed factor.

meshScrollScaleStrength

Type: (Number) - default: 0.6

The scale/drag speed factor.

scrollScaleStrength

Type: (Number) - default: 0

The scroll/drag scale factor.

defaultCurveDistortionStrength

Type: (Number) - default: 0.04

Default curve distortion strength.

curveDistortionStrength

Type: (Number) - default: 2

Curve distortion scroll strength.

sliderCurveStrentgh

Type: (Number) - default: 0.2

Global slider curve distortion, this will apply a global curvateure on the entire slider.

mouseFollowStrength

Type: (Number) - default: 0.3

When moving the mouse, the slider slightly rotates based on the mouse position. This feature allows you to adjust the sensitivity.

mouseFollowEasingStrength

Type: (Number) - default: 0.3

Easing for the mouseFollowStrength.

rgbShiftStrength

Type: (Number) - default: 0

This enable RGB shift based on the scroll speed.

gap

Type: (Number) - default: 0

Horizontal gap.

horizontalX

Type: (Number) - default: 0

Mehes group position x.

horizontalY

Type: (Number) - default: 0.03

Mehes group position y.

horizontalZ

Type: (Number) - default: 0

Mehes group position z.

horizontalRotationX

Type: (Number) - default: 0

Mehes group rotation x.

horizontalRotationY

Type: (Number) - default: 0

Mehes group rotation y.

horizontalRotationZ

Type: (Number) - default: 0

Mehes group rotation z.

noiseAmplitude

Type: (Number) - default: 0

Items vertex noise distortion amplitude.

noiseFrequency

Type: (Number) - default: 0

Items vertex noise distortion frequency.

noiseSpeed

Type: (Number) - default: 0

Items vertex noise distortion speed.

noiseSize

Type: (Number) - default: 0.4

The slider noise size.

noiseFadeSize

Type: (Number) - default: 0.2

The slider noise fade size.

noiseBlurStrength

Type: (Number) - default: 0.3

The slider noise blur strength.

noiseFadeColor

Type: (String) - default: #000000

The slider noise color.

showNextAndPrevButtons

Type: (Number) - default: yes

This can be yes or no, show the controls button and tooltips.

showNextAndPrevButtonsOnMobile

Type: (Number) - default: yes

This can be yes or no, show the controls buttons and tooltips on mobile devices.

buttonsNormalColor

Type: (String) - default: #000000

Controls buttons normal color.

buttonsSelectedColor

Type: (String) - default: #ffffff

Controls buttons selected color.

buttonsSize

Type: (Number) - default: 46

The slider controls buttons size in px.

Methods

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

JavaScript methods look like fwdnsc0.methodName( /* arguments */ ), please note that fwdnsc0 is the slider instance name, if you are using multiple sliders don't forget to set the instance unique for each instance like this fwdnsc1, fwdnsc2, fwdnsc3, etc... depending on how many sliders are added.

goToItem

.goToItem(itemId:Number, animate:Boolean, duration: Number, preferShortestDirection: Boolean)

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

destory

.destory()

Destroy the instance and removes it from the DOM.

Events

Noise Slider Slider 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 fwdnscAPI = setInterval(() =>{
if(window['fwdnsc0']){
	console.log('SC API ready')
	clearInterval(fwdnscAPI);

	// Register the LIKE event.
	fwdnsc0.addEventListener(FWDNSC.ERROR, onEerror);
	fwdnsc0.addEventListener(FWDNSC.ITEM_UPDATE, onItemUpdate);
	
}
}, 100);


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

// Listen for ITEM_UPDATE event.
function onItemUpdate(e){
	console.log('Item update', e);
}

FWDSIS.ITEM_UPDATE

FWDSIS.ITEM_UPDATE

Dispatched when the slider item postions are changing.

FWDNSC.ERROR

FWDNSC.ERROR

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

Notes

An award-winning slide carousel, now easily available for your website. After nearly 25 years of envisioning worke like this, the right moment and technology have finally made it possible.

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.

© Copyright FWDesign