JavaScript Documentation

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

Getting Started

Shader Infinite Slider, a powerful, responsive, and extremely customizable infinite 3D 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 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 slider 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 slider 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 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/FWDSIS.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'){
		setupSlider();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupSlider();
		});
	}

	function setupSlider(){
		
		new FWDSIS({
                    
			// Main settings.  
            instance: 'fwdsis0',
            parentId: 'myDiv',
            displayType: 'responsive',
            sliderDataId: 'sliderData',
            initializeWhenVisible: 'no',
            maxWidth: 1920,
            maxHeight: 1000,
            stopScrollingForPx: 0,
            autoScale: 'yes',
            stats: 'yes',
            gui: 'yes',
            showPreloader: 'yes',
            preloaderColor: '#FFFFFF',
            backgroundColor: '#FFFFFF',
            infinite: 'yes',
            planeWidth: 1.8,
            planeHeight: 1.4,
            showMaskGradient: 'no',
            useCaption: 'yes',
            useBlackAndWhite: 'yes',
            opacityStrength: 0.8,
            rgbShiftStrength: 0,
            snap: 'yes',
            scrollSpeedStrength: 0.3,
            scrollScaleStrength: 0.8,//0.69
            defaultCurveDistortionStrength: 0.04,
            curveDistortionStrength: 2,
            liquidDistortionStrength: 0,
            mouseRippleStrength: 0.6,

            // Camera postion
            verticalGap: 0.05,
            verticalX: -0.23,
            verticalY: 0,
            verticalZ: 0.06,
            verticalRotationX: -0.15,
            verticalRotationY: -0.3,
            verticalRotationZ: -0.13,
            horizontalGap: 0.01,
            showHorizontalAtLestThanWidth: 1100,
            horizontalX: 0,
            horizontalY: 0.39,
            horizontalZ: 0,
            horizontalRotationX: 0,
            horizontalRotationY: 0.11,
            horizontalRotationZ: -0.03,

            // Noise
            noiseAmplitude: 0,
            noiseFrequency: 0,
            noiseSpeed: 0.6,

            // Controller 
            enableControlsAudio: 'yes',
            showControlButtons: 'yes',
            controlButtonsNormalColor: '#333333',
            controlButtonsSelectedColor: '#CD5C5C',
            controlsImageHeight: 80,

            // Post processing.
            antialias: 'yes',
            uwaveFrequency: 0.1,
            waveAmplitude: 0.02,
            glitch: 'no',
            buldge: 'yes',
            buldgeDirection: 'in',
            buldgeFixed: 'yes',
            buldgeStrength: 1.3,
            rippleDistortion: 'no',
            rippleDistortionStrength: 0.2,
            rippleDistortionSize: 0.5,
            grid: 'no',
            gridAddRGBDistortion: 'yes',
            gridSize: 400,
            gridMouseRadiusFactor: 0.2,
            gridMouseStrengthFactor: 0.48,
            gridMouseRelaxation: 0.9,
            afterImage: 'no',
            afterImageDumping: 0.75,

		});
		
	}
</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 fwdsis1, fwdsis2, fwdsis3, etc... depending on how many sliders are added, also change the parentId to a different ID and if you want add a different slider slider gallery by also change the sliderDataId to point to a different slider slider gallery.

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

A slider slider 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 slider slider 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 slider 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="fwdsis caption-title"><span>Shader</span> Infinite Slider</p>
			<p class="fwdsis caption-desc">Next-gen shader slider with multiple <a href="https://webdesign-flash.ro" target="_blank">topologies</a> and post-processing effects.</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="fwdsis caption-title">Composer <span>Post Processing</span></p>
			<p class="fwdsis caption-desc">Multiple post-processing effects, like <strong>glitch</strong>, <strong>buldge</strong>, <strong>ripple</strong>, <strong>after-image</strong>, <strong>waves</strong> and more...</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="fwdsis caption-title"><span>Video</span> Integration</p>
			<p class="fwdsis caption-desc">Embed and play videos/<a href="https://webdesign-flash.ro" target="_blank">.mp4</a> directly inside items.</p>
		</div>
	</div>

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

</div>

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

Slider slider gallery item parameters

  • data-src - required media path (.jpg, .jpeg, .png, .webp, .mp4).
  • data-width - the image native width.
  • data-height - the image native height.
  • data-url - optinal URL to open when the item is clicked.
  • data-target - optinal target for the URL to open when the item is clicked, _self or _blank

To add caption jsut add div with a sta-caption as showd above in the template example, the classes can be formatted with CSS in the global.css file.

Modify code

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

Settings

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

	function setupSlider(){
		new FWDSIS({ 

			// Main settings.  
			instance: 'fwdsis0',
			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 fwdsis0, if you are using multiple sliders instances just change the instance to fwdsis1, fwdsis2, fwdsis3, 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, this will be ignored if the slider is horizontal.

sliderDataId

Type: (String) - default: unset

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

initializeWhenVisible

Type: (String) - default: yes

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

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.

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.

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.

scrollSpeedStrength

Type: (Number) - default: 0.3

Scroll strength factor.

scrollScaleStrength

Type: (Number) - default: 0.8

Scroll scale strength factor.

defaultCurveDistortionStrength

Type: (Number) - default: 0.04

Default curve distortion strength.

curveDistortionStrength

Type: (Number) - default: 2

Curve distortion scroll strength.

liquidDistortionStrength

Type: (Number) - default: 0

Liquid distortion scroll strength.

mouseRippleStrength

Type: (Number) - default: 0.6

Mouse ripple distortion strength.

verticalGap

Type: (Number) - default: 0.6

Vertical gap between items.

verticalX

Type: (Number) - default: 0

Vertical postion x.

verticalY

Type: (Number) - default: 0

Vertical postion y.

verticalZ

Type: (Number) - default: 0

Vertical postion z.

verticalRotationX

Type: (Number) - default: 0

Vertical rotation x.

verticalRotationY

Type: (Number) - default: 0

Vertical rotation y.

verticalRotationZ

Type: (Number) - default: 0

Vertical rotation z.

horizontalGap

Type: (Number) - default: 0

Horizontal position gap.

showHorizontalAtLestThanWidth

Type: (Number) - default: 1100

By default, the slider orientation is vertical. If the value (in pixels) is below this threshold, the slider will become horizontal.

horizontalX

Type: (Number) - default: 0

Horizontal position x.

horizontalY

Type: (Number) - default: 0

Horizontal position y.

horizontalZ

Type: (Number) - default: 0

Horizontal position z.

horizontalRotationX

Type: (Number) - default: 0

Horizontal rotation x.

horizontalRotationY

Type: (Number) - default: 0

Horizontal rotation y.

horizontalRotationZ

Type: (Number) - default: 0

Horizontal rotation z.

horizontalRotationZ

Type: (Number) - default: 0

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

enableControlsAudio

Type: (String) - default: yes

This can be yes or no, enables buttons controls audio hover.

showControlButtons

Type: (String) - default: yes

This can be yes or no, show the buttons controls.

controlButtonsNormalColor

Type: (String) - default: #333333

Controls buttons background normal color.

controlButtonsSelectedColor

Type: (String) - default: #CD5C5C

Controls buttons background selected color.

controlsImageHeight

Type: (Number) - default: 80

The controls tooltip image height.

antialias

Type: (String) - default: yes

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

uwaveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

rgbShiftStrength

Type: (Number) - default: 0

Wave RGB color shift.

glitch

Type: (String) - default: no

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

gridAddRGBDistortion

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing RGB shigt 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.

grid

Type: (String) - default: no

This can be yes or no, enable grid post-porcessing 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.

Methods

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

JavaScript methods look like fwdsis0.methodName( /* arguments */ ), please note that fwdsis0 is the slider instance name, if you are using multiple sliders don't forget to set the instance unique for each instance like this fwdsis1, fwdsis2, fwdsis3, 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

Shader Infinite 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 fwdsisAPI = setInterval(() =>{
	if(window['fwdsis0']){
		console.log('SIS API ready')
		clearInterval(fwdsisAPI);

		// Register the update event.
		fwdsis0.addEventListener(FWDSIS.ITEM_UPDATE, onItemUpdate);
	}
}, 100);

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

FWDSIS.ITEM_UPDATE

FWDSIS.ITEM_UPDATE

Dispatched when the slider item postions are changing.

FWDSIS.ERROR

FWDSIS.ERROR

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

Notes

I've dreamt of bringing this vision to life since I first started developing in the 2000s. For nearly 25 years, this idea has lived in my mind—waiting for the right moment, the right tools, and the right technology. And now, at last, it's 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