Getting Started

Accordion 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 spiral/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 size to the slider mesh.

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

    function setupAS(){
		
		new FWDAS({
                
			// Main settings.  
            instance: 'fwdas0',
            parentId: 'myDiv',
            displayType: 'responsive',
            sliderDataId: 'sliderData',
            initializeWhenVisible: 'no',
            maxWidth: 1920,
            maxHeight: 750,
            autoScaleStartWidth: 1200,
            stopScrollingForPx: 0,
            autoScale: 'yes',
            stats: 'no',
            gui: 'no',
            showPreloader: 'yes',
            preloaderColor: '#FFFFFF',
            backgroundColor: '#141414',
            itemBackgroundColor: '#333333',
            infinte: 'yes',
            startAtItem: 0,
            itemWidth: 3.41,
            itemHeight: 3.65,
            minItemScaleX: 0.16,
            maxItemScaleX: 1,
            minItemScaleY: 0.6,
            maxItemScaleY: 0.6,
            gapBetweenItems: 0.1,
            showMaskGradient: 'no',
            useCaption: 'yes',
            useBlackAndWhite: 'yes',
            showOnlyWhenAllMediaIsLoaded: 'no',
            opacityStrength: 0.6,
            scrollSpeedStrength: 1,
            mouseFollowStrength: 0,
            noiseAmplitude: 0,
            noiseFrequency: 0,
            noiseSpeed: 0.6,

            // Camera postion
            horizontalX: 0,
            horizontalY: 0,
            horizontalZ: 0,
            horizontalRotationX: 0,
            horizontalRotationY: 0,
            horizontalRotationZ: 0,
            
            // Slideshow
            showSlideShow: true,
            slideshowDalay: 4,        
            slideshowBkColor: 'rgba(136,136,136,1)', 
            slideshowFillColor: '#FFFFFF',
            slideshowRadius: 12,
            slideshowStrokeSize: 3,
            slideshowOffsetX: 20,
            slideshowOffsetY: 40,

            // Post processing.
            antialias: 'yes',

            fluid: 'no',
            fluidPassMainText: 'ACCORDION SLIDER',
            fluidPassSubText: 'Hold to start experience',

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

            glitch: 'no',

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

            noise: 'no',
            noiseSize: 0.4,
            noiseFadeSize: 0.2,
            noiseBlurStrength: 0.3,

            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 fwdas1, fwdas2, fwdas3, etc... depending on how many sliders are added, also change the parentId to a different ID and if you want add a different slider by also change the sliderDataId to point to a different slider.

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

Setup slider

A slider 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 data markup, This unique ID has to be added as the value of the sliderDataId option in the slider settings like this sliderDataId: 'sliderData'.

<!-- Accordion Slider. -->
<div id="sliderData" style="display: none;">

	<div data-src="media/videos/2.mp4" data-width="1280" data-height="720" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<h2 class="fwdas caption header">Waterfall</h2>
			<p class="fwdas caption info">A cinematic glimpse, <a href="https://fwdapps.net" target="_blank">example here</a>.</p>
		</div>
	</div> 

	<div data-src="media/images/1.png" data-width="1000" data-height="599" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<h2 class="fwdas caption header">Quality Cofee</h2>
			<p class="fwdas caption info">A cinematic glimpse with quiet mood. <a href="https://fwdapps.net" target="_blank">example here</a>.</p>
		</div>
	</div>

	<div data-src="media/images/2.png" data-width="1000" data-height="599" data-url="https://fwdapps.net" data-target="_blank">
		<div data-caption="">
			<h2 class="fwdas caption header">Cute Bunny</h2>
			<p class="fwdas caption info">A cinematic glimpse full of light and motion. <a href="https://fwdapps.net" target="_blank">example here</a>.</p>
		</div>
	</div>

	<!-- Add as many slider items as you need ... -->

</div>

Add one or more item divs inside the slider data container, using the parameters below.

Slider item parameters

data-src - required media source path (.jpg, .jpeg, .png, .webp) or video (.mp4).
data-width - required media width in pixels.
data-height - required media height in pixels.
data-url - optional URL to open when the centered mesh is clicked.
data-target - optional URL target: _self or _blank.
data-caption - optional wrapper div for caption HTML content.

Slider item caption

An optional caption can be added inside a nested data-caption container. Caption styling is defined in global.css.

<div data-src="media/images/1.png" data-width="1000" data-height="599" data-url="https://fwdapps.net" data-target="_blank">
	<div data-caption="">
		<h2 class="fwdas caption header">Quality Cofee</h2>
		<p class="fwdas caption info">A cinematic glimpse with quiet mood. <a href="https://fwdapps.net" target="_blank">example here</a>.</p>
	</div>
</div>

Modify code

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

Settings

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

    function setupAS(){
		new FWDAS({ 

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

instance

Type: (String) - default: fwdas0

The slider instance name, this is used to call the API. In the examples files the instance name is set to fwdas0, if you are using multiple sliders instances just change the instance to fwdas1, fwdas2, fwdas3, 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

The slider display type can be either responsive, which will automatically resize the slider based on the maxWidth and maxHeight settings, or afterParent, which will resize the slider based on its parent element’s width and height.

sliderDataId

Type: (String) - default: unset

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

initializeWhenVisible

Type: (String) - default: no

This can be yes or no. If set to yes, the slider initializes only when it enters the viewport (lazy init). If set to no, it initializes immediately.

infinite

Type: (String) - default: yes

This can be yes or no. If set to yes, the slider wraps items in an endless loop so navigation continues seamlessly from last to first and first to last.

showOnlyWhenAllMediaIsLoaded

Type: (String) - default: yes

This can be yes or no. If set to yes, the slider is displayed only after all images/videos are loaded. If set to no, the slider can render progressively while remaining media continues to load.

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: 620

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.

paralax

Type: (String) - default: no

This can be yes or no ads parallax vertical scrolling.

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.

bendVertices

Type: (String) - default: yes

This can be yes or no. Enables center mesh bending deformation.

itemWidth

Type: (Number) - default: 2.6

The item width in units.

itemHeight

Type: (Number) - default: 1.65

The item height in units.

minItemScaleX

Type: (Number) - default: 0.1

The item min scale in uints.

maxItemScaleX

Type: (Number) - default: 1

The item max scale in uints.

minItemScaleY

Type: (Number) - default: 1

The item min scale in uints.

gapBetweenItems

Type: (Number) - default: 1

The minimized gap between items in units.

maximizedGap

Type: (Number) - default: 1

The maximized gap between items 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, 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 black.

addShiftBaseOnSpeed

Type: (String) - default: yes

This can be yes or no, this ads a shift on the item mesh image, moves it a bit based on the drag speed.

curveDistortionStrength

Type: (Number) - default: 0

The item mesh curve distortion based on the drag speed.

opacityStrength

Type: (Number) - default: 0.6

The default items opacity.

scrollSpeedStrength

Type: (Number) - default: 0.6

The scroll/drag speed factor.

scrollBendStrength

Type: (Number) - default: 1

The scroll/drag bending strength factor for the center bending effect.

mouseFollowStrength

Type: (Number) - default: 0

The strength of the rotation of the camera as the mouse moves.

noiseAmplitude

Type: (Number) - default: 0

The item noise amplitude.

noiseFrequency

Type: (Number) - default: 0

The item noise frequency.

noiseSpeed

Type: (Number) - default: 0.6

The item noise speed.

horizontalX

Type: (Number) - default: 0

Camera position X.

horizontalY

Type: (Number) - default: 0

Camera position Y.

horizontalZ

Type: (Number) - default: 1.3

Camera position Z.

horizontalRotationX

Type: (Number) - default: 0

Camera items x rotation.

horizontalRotationY

Type: (Number) - default: 0

Camera items y rotation.

horizontalRotationZ

Type: (Number) - default: 0

Camera items z rotation.

enableControlsAudio

Type: (String) - default: yes

This can be yes or no enable control buttons audio hover sound.

showControlButtons

Type: (String) - default: yes

This can be yes or no show control buttons.

controlsImageHeight

Type: (Number) - default: 80

The control buttons image tooltip image height.

controlButtonsNormalColor

Type: (String) - default: #FFFFFF

The control buttons color.

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.

fluid

Type: (String) - default: no

This can be yes or no. Enables the fluid post-processing intro effect.

fluidPassMainText

Type: (String) - default: ACCORDION SLIDER

Fluid post-processing main text.

fluidPassSubText

Type: (String) - default: Hold to start experience

Fluid post-processing sub text.

During fluid intro hold, captions/slideshow/buttons remain hidden until the intro is completed.

waveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

rgbShiftStrength

Type: (Number) - default: 0

Wave RGB color shift.

mouseRippleStrength

Type: (Number) - default: 0.6

Ripple mouse strength.

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-processing effect.

buldgeDirection

Type: (String) - default: in

This can be in, out or both, enable buldge post-processing effect.

buldgeFixed

Type: (String) - default: no

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

buldgeStrength

Type: (Number) - default: 1.3

The buldge post-processing strength.

noise

Type: (String) - default: no

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

noiseSize

Type: (Number) - default: 0.4

The noise post-porcessing efect size.

noiseFadeSize

Type: (Number) - default: 0.2

The noise post-porcessing efect fade size.

noiseBlurStrength

Type: (Number) - default: 0.3

The noise post-porcessing efect blur fade size.

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.

Methods

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

JavaScript methods look like fwdas0.methodName( /* arguments */ ), please note that fwdas0 is the slider instance name, if you are using multiple sliders don't forget to set the instance unique for each instance like this fwdas1, fwdas2, fwdas3, etc... depending on how many sliders 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

Accordion 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 fwdasAPI = setInterval(() =>{
if(window['fwdas0']){
	console.log('LS API ready')
	clearInterval(fwdasAPI);

	// Register the LIKE event.
	fwdas0.addEventListener(FWDAS.ERROR, onEerror);
}
}, 100);


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

FWDAS.ITEM_UPDATE

Dispatched when the slider item postions are changing.

FWDAS.ERROR

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

Notes

Ever since I wrote my first lines of code back in the early 2000s, I’ve been chasing a single dream: to turn imagination into living, breathing digital art. Today, thanks to the boundless power of Three.js and the wizardry of GLSL, that dream erupts into reality—unleashing a new era of creative marvels at last!

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.

JavaScript Documentation

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

Getting Started

Installation

Setup slider

Slider item parameters

Slider item caption

Modify code

Settings

Example

instance

parentId

displayType

sliderDataId

initializeWhenVisible

infinite

showOnlyWhenAllMediaIsLoaded

maxWidth

maxHeight

stopScrollingForPx

autoScale

paralax

stats

gui

showPreloader

preloaderColor

backgroundColor

bendVertices

itemWidth

itemHeight

minItemScaleX

maxItemScaleX

minItemScaleY

gapBetweenItems

maximizedGap

showMaskGradient

useCaption

useBlackAndWhite

addShiftBaseOnSpeed

curveDistortionStrength

opacityStrength

scrollSpeedStrength

scrollBendStrength

mouseFollowStrength

noiseAmplitude

noiseFrequency

noiseSpeed

horizontalX

horizontalY

horizontalZ

horizontalRotationX

horizontalRotationY

horizontalRotationZ

enableControlsAudio

showControlButtons

controlsImageHeight

controlButtonsNormalColor

antialias

fluid

fluidPassMainText

fluidPassSubText

waveFrequency

waveAmplitude

rgbShiftStrength

mouseRippleStrength

glitch

buldge

buldgeDirection

buldgeFixed

buldgeStrength

noise

noiseSize

noiseFadeSize

noiseBlurStrength

grid

gridAddRGBDistortion

gridSize

gridMouseRadiusFactor

gridMouseStrengthFactor

gridMouseRelaxation