Getting Started

Mirror Media 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/FWDMMS.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="module">
	import FWDMMS from './js/FWDMMS.js';
	
	if(document.readyState == 'complete'){
		setupMMS();
	}else{
		document.addEventListener('DOMContentLoaded', ()=>{
			setupMMS();
		});
	}

	function setupMMS(){
		new FWDMMS({
                
			// Main settings.  
			instance: 'fwdmms0',
			parentId: 'myDiv',
			display: 'responsive',
			sliderDataId: 'sliderData',
			initializeWhenVisible: 'no',
			maxWidth: 1920,
			maxHeight: 900,
			autoScaleStartWidth: 1200,
			autoScale: 'yes',
			stats: 'no',
			gui: 'yes',
			showPreloader: 'yes',
			preloaderColor: '#ffffff',
			backgroundColor: '#141414',
			infinite: 'yes',
			bendStrength: 0.8,
			gap: 0.7,
			planeWidth: 5.3,
			planeHeight: 3.5,
			showMaskGradient: 'no',
			useCaption: 'yes',
			captionPosition: 'sticky',
			useBlackAndWhite: 'no',
			opacityStrength: 1,
			snap: 'yes',
			twirl: 'yes',
			twirlStrength: 0,
			twirlStart: 0.1,
			strongCurvedFlatSize: 2,
			trailOffsetY: 0.08,
			trailScale: 1.2,
			maxBendSpeed: 0.28,
			maxTrailSpeed: 0.05,
			waveStrength: 0,
			scrollSpeedStrength: 0.9,
			curveDistortionStrength: 0,
			reflectionSize: 0.2,
			reflectionOpacity: 0.5,
			liquidDistortionStrength: 0,
			cameraPositionX: 0,
			cameraPositionY: 0,
			x: 0,
			y: -0.8,
			z: -4.1,
			rotationX: 0,
			rotationZ: 0,

			// Post processing.
			antialias: 'yes',
			waveFrequency: 0.1,
			waveAmplitude: 0.02,
			rgbShiftStrength: 0,
			useNoise: 'no',
			noiseSize: 0.4,
			noiseFadeSize: 0.2,
			noiseBlurStrength: 0.3,
			noiseFadeColor: '#000000',
			flowmapRGBShift: true,
			flowmapRGBShiftAmount: 0,
			flowmapRGBShiftStrength: 1,
			flowmapStrength: 1,
			flowmapRadius: 0.1,
			flowmapSensitivity: 1,
			flowmapForce: 10.0,
			flowmapFalloff: 1.8,

			// Lightbox.
			rlPath: 'content/rl',
			useLightbox: "yes",
			rlUseDeepLinking: "yes",
			rlItemBackgroundColor: "#212121",
			rlDefaultItemWidth: 1527,
			rlDefaultItemHeight: 859,
			rlItemOffsetHeight: 37,
			rlItemOffsetHeightButtonsTop: 47,
			rlItemBorderSize: 0,
			rlItemBorderColor: "#FFFFFF",
			rlMaxZoom: 1.2,
			rlPreloaderBkColor: "#2e2e2e",
			rlPreloaderFillColor: "#FFFFFF",
			rlButtonsAlignment: "in",
			rlButtonsHideDelay: 5,
			rlMediaLazyLoading: "yes",
			rlUseDrag: "yes",
			rlUseAsModal: "no",
			rlShowSlideShowButton: "yes",
			rlShowSlideShowAnimation: "yes",
			rlSlideShowAutoPlay: "no",
			rlSlideShowAutoStop: "no",
			rlSlideShowDelay: 6,
			rlSlideShowBkColor: "#2e2e2e",
			rlSlideShowFillColor: "#FFFFFF",
			rlUseKeyboard: "yes",
			rlUseDoubleClick: "yes",
			rlShowCloseButton: "yes",
			rlShowFullscreenButton: "yes",
			rlShowZoomButton: "yes",
			rlShowCounter: "yes",
			rlShowNextAndPrevBtns: "yes",
			rlSpaceBetweenBtns: 8,
			rlButtonsOffsetIn: 10,
			rlButtonsOffsetOut: 10,
			rlBackgroundColor: "rgba(0,0,0,.99)",
			rlShareButtons: ['facebook', 'twitter', 'linkedin', 'tumblr', 'pinterest', 'reddit', 'buffer', 'digg','blogger'],
			rlShareText: "Share on",
			rlSharedURL: "deeplink",
			rlShareMainBackgroundColor: "rgba(0,0,0,.4)",
			rlShareBackgroundColor: "#FFFFFF",
			rlShowThumbnails: "yes",
			rlShowThumbnailsIcon: "yes",
			rlThumbnailsHeight: 80,
			rlThumbnailsOverlayColor: "rgba(0,0,0,.4)",
			rlThumbnailsBorderSize: 2,
			rlThumbnailsBorderColor: "#FFFFFF",
			rlSpaceBetweenThumbnailsAndItem: 10,
			rlThumbnailsOffsetBottom: 10,
			rlSpaceBetweenThumbnails: 5,
			rlShowCaption: "yes",
			rlCaptionPosition: "bottomout",
			rlShowCaptionOnSmallScreens: "no",
			rlCaptionAnimationType: "motion",
			rlUseVideo: "yes",
			rlFillEntireScreenWithPoster: "yes",
			rlVolume: 1,
			rlVideoAutoPlay: "no",
			rlNextVideoAutoPlay: "no",
			rlVideoAutoPlayText: "Click to unmute",
			rlShowLogo: "yes",
			rlLogoPath: "content/rl/content/evp/skin/logo.png",
			rlLogoLink: "",
			rlShowDefaultControllerForVimeo: "yes",
			rlShowScrubberWhenControllerIsHidden: "yes",
			rlShowRewindButton: "yes",
			rlShowVolumeButton: "yes",
			rlShowChromecastButton: "yes",
			rlShowPlaybackRateButton: "no",
			rlShowQualityButton: "yes",
			rlShowFullScreenButton: "yes",
			rlShowScrubberToolTipLabel: "yes",
			rlShowTime: "yes",
			rlTimeColor: "#B9B9B9",
			rlYoutubeQualityButtonNormalColor: "#B9B9B9",
			rlYoutubeQualityButtonSelectedColor: "#FFFFFF",
			rlScrubbersToolTipLabelBackgroundColor: "#FFFFFF",
			rlScrubbersToolTipLabelFontColor: "#5a5a5a",
			rlAudioVisualizerLinesColor: "#D60E63",
			rlAudioVisualizerCircleColor: "#FFFFFF",
			rlThumbnailsPreviewWidth: 196,
			rlThumbnailsPreviewBackgroundColor: "#2e2e2e",
			rlThumbnailsPreviewBorderColor: "#414141",
			rlThumbnailsPreviewLabelBackgroundColor: "#414141",
			rlThumbnailsPreviewLabelFontColor: "#CCCCCC",
			rlSkipToVideoText: "You can skip to video in: ",
			rlSkipToVideoButtonText: "Skip Ad"

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

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

Setup slider gallery

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

	 <div>
		<div data-src="media/thumbnails/mp4.jpg" data-width="900" data-height="600"></div>
		<li data-rl-src="media/videos/fwd-1080p.mp4" data-rl-poster-src="media/images/mp4.jpg" data-rl-subtitle-src="media/subtitles/english_subtitle.vtt"></li>
		<div data-caption="">
			<p class="caption-title">Lightbox MP4 Self/External Hosted With Subtitle</p>
			<p class="caption-desc">Mirror Media Slider has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</div>
		<li data-rl-caption="">
			<p class="fwdrl-title">MP4 Self/External Hosted With Subtitle</p>
			<p class="fwdrl-desc">Mirror Media Slider has included <a href="https://webdesign-flash.ro/p/evp" target="_blank">Easy Video Player</a> with amazing features.</p>
		</li>
	</div> 

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

</div>

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

Slider item parameters

data-src - required media path (.jpg, .jpeg, .png, .webp, .mp4).
data-width - the image native width.
data-height - the image native height.

Lightbox item parameters

data-rl-src - supported lightbox sources: mp4, mp3, YouTube (use the YouTube video URL), Vimeo (use the Vimeo video URL), HLS, Google Drive and other cloud formats, iframe (use the page URL), HTML content (use the element ID, e.g., #myId), Google Maps (use the Google Maps embed URL), PDF (use a .pdf URL). If you want no action when the item is clicked, set this to none. To open a new page when the center/front item is clicked, set this to the page URL and prefix it with link: (for example, link:https://your-page.com). To open it in the same window, set data-rl-target to _self; to open it in a new page, set it to _blank.
data-rl-poster-src - optional poster. This holds the poster src, the supported formats are .jpg, .jpeg and .png.
data-rl-subtitle-src - optional subtitle for video. The subtitle format has to be srt/vtt.
data-rl-vast-src - optional VAST/IMA URL.

Modify code

Mirror Media Slider is using VITE to build the final JavaScript file.

Settings

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

	function setupMMS(){
		new FWDMMS({ 

			// Main settings.  
			instance: 'fwdmms0',
			display: '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 fwdmms0, if you are using multiple sliders instances just change the instance to fwdmms1, fwdmms2, fwdmms3, 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.

display

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 slider gallery data div ID, please read the slider gallery section for more info.

initializeWhenVisible

Type: (String) - default: yes

This can be yes or no, lazy scrolling / loading, the posibility to initialize the slider on scroll when it is visible in the page.

maxWidth

Type: (Number) - default: 1920

The slider maximum width in px.

maxHeight

Type: (Number) - default: 800

The slider maximum height in px.

autoScaleStartWidth

Type: (Number) - default: 1200

The minimum size (in pixels) at which the slider will start to adjust its height if autoScale is set to yes.

autoScale

Type: (String) - default: yes

This can be yes or no. 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 stats (FPS/memory usage).

gui

Type: (String) - default: yes

This can be yes or no, show the live GUI 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: #141414

The main background color in HEX or RGBA.

infinite

Type: (String) - default: yes

This can be yes or no, sets the slider infinite mode or not.

bendStrength

Type: (Number) - default: 1

Scroll bending strength factor.

gap

Type: (Number) - default: 0

Gap between items in units.

planeWidth

Type: (Number) - default: 5.3

The plane width in units.

planeHeight

Type: (Number) - default: 3.5

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

captionPosition

Type: (String) - default: sticky

Caption position, can be sticky or other supported positions.

useBlackAndWhite

Type: (String) - default: no

This can be yes or no, enable black and white for the not central items.

opacityStrength

Type: (Number) - default: 0.5

Fade opacity for items that are not centered.

snap

Type: (String) - default: no

This can be yes or no, enable snap for the closest item to center.

twirl

Type: (String) - default: yes

This can be yes or no, enable twirl for all items except the center item.

twirlStrength

Type: (Number) - default: 1

Twirl strength factor.

twirlStart

Type: (Number) - default: 0.1

Twirl start threshold.

strongCurvedFlatSize

Type: (Number) - default: 2

Strong curve flat size factor for the curved topology.

trailOffsetY

Type: (Number) - default: 0.08

Vertical offset for the trail display.

trailScale

Type: (Number) - default: 1.2

Trail display scale.

maxBendSpeed

Type: (Number) - default: 0.28

Maximum bend speed.

maxTrailSpeed

Type: (Number) - default: 0.05

Maximum trail speed.

waveStrength

Type: (Number) - default: 0

Wave strength (internally an offset may be applied).

scrollSpeedStrength

Type: (Number) - default: 1

Scroll strength factor.

curveDistortionStrength

Type: (Number) - default: 0

Curve distortion scroll strength.

liquidDistortionStrength

Type: (Number) - default: 0

Liquid distortion scroll strength.

reflectionSize

Type: (Number) - default: 0.6

Item reflection size, a number from 0 to 1.

reflectionOpacity

Type: (Number) - default: 0.56

Item reflection opacity, a number from 0 to 1.

cameraPositionX

Type: (Number) - default: 0

Perspective camera x position.

cameraPositionY

Type: (Number) - default: 0

Perspective camera y position.

x

Type: (Number) - default: 0

Slider x position.

y

Type: (Number) - default: 0

Slider y position.

z

Type: (Number) - default: 0

Slider z position.

rotationX

Type: (Number) - default: 0

Slider rotation X.

rotationZ

Type: (Number) - default: 0

Slider rotation Z.

antialias

Type: (String) - default: yes

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

waveFrequency

Type: (Number) - default: 0.1

Wave frequency.

waveAmplitude

Type: (Number) - default: 0.02

Wave amplitude.

useNoise

Type: (String) - default: yes

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

noiseSize

Type: (Number) - default: 0

Noise post-processing size.

noiseFadeSize

Type: (Number) - default: 0

Noise post-processing fade size.

noiseBlurStrength

Type: (Number) - default: 0.3

Noise post-processing blur size.

noiseFadeColor

Type: (String) - default: #000000

Noise post-processing color.

flowmapRGBShift

Type: (Boolean) - default: false

Enable RGB shift based on flowmap.

flowmapRGBShiftAmount

Type: (Number) - default: 0.008

RGB shift amount.

flowmapRGBShiftStrength

Type: (Number) - default: 1

RGB shift strength.

flowmapStrength

Type: (Number) - default: 1

Flowmap strength.

flowmapRadius

Type: (Number) - default: 0.1

Flowmap radius.

flowmapSensitivity

Type: (Number) - default: 1

Flowmap mouse sensitivity.

flowmapForce

Type: (Number) - default: 10.0

Flowmap force.

flowmapFalloff

Type: (Number) - default: 1.8

Flowmap falloff.

rlPath

Type: (String) - default: content/rl

The lightbox folder path. The lightbox is loaded asynchronously at run time, and this path can be either relative or absolute.

useLightbox

Type: (String) - default: yes

This can be yes or no, loads the lightbox, set it to no if you don't use the lightbox.

rlUseDeepLinking

Type: (String) - default: yes

This can be yes or no, creates an unique and shareable link and history entry for the current opened media lightbox item.

rlItemBackgroundColor

Type: (String) - default: #212121

Background color for the lightbox items.

rlDefaultItemWidth

Type: (Number) - default: 1527

The default global lightbox item width in px if its Iframe, video or HTML content.

rlDefaultItemHeight

Type: (Number) - default: 859

The default global lightbox item height in px if its Iframe, video or HTML content.

rlItemOffsetHeight

Type: (Number) - default: 37

Offset/gap in px for the lightbox items when buttons are aligned in or out.

rlItemOffsetHeightButtonsTop

Type: (Number) - default: 47

Offset/gap in px for the lightbox items when buttons are aligned top.

rlItemBorderSize

Type: (Number) - default: 0

Lightbox item border size in px.

rlItemBorderColor

Type: (String) - default: #FFFFFF

Lightbox item border color.

rlMaxZoom

Type: (Number) - default: 1.2

The zoom factor for the lightbox item if it is an image and it is zoomed in.

rlPreloaderBkColor

Type: (String) - default: #2e2e2e

The lightbox preloader circular animation background color.

rlPreloaderFillColor

Type: (String) - default: #FFFFFF

The lightbox preloader circular animation fill color.

rlButtonsAlignment

Type: (String) - default: in

This can be in, out and top the lightbox button alignment.

rlButtonsHideDelay

Type: (Number) - default: 3.5

Duration in seconds until the lightbox buttons will hide after several seconds of user inactivity.

rlMediaLazyLoading

Type: (String) - default: yes

This can be yes or no, loads the lightbox images and video posters in the background.

rlUseDrag

Type: (String) - default: yes

This can be yes or no, drag the lightbox media item to navigate to the next or previous slide.

rlUseAsModal

Type: (String) - default: no

This can be yes or no, close the lightbox only if the close button is used.

rlShowSlideShowButton

Type: (String) - default: yes

This can be yes or no, show the lightbox slideshow play/pause button.

rlShowSlideShowAnimation

Type: (String) - default: yes

This can be yes or no, show the lightbox slideshow circular animation.

rlSlideShowAutoPlay

Type: (String) - default: no

This can be yes or no, the lightbox will start the slideshow as soon as the first media item is showed.

rlSlideShowAutoStop

Type: (String) - default: no

This can be yes or no, the lightbox will stop the slideshow when the last media item is displayed.

rlSlideShowDelay

Type: (Number) - default: 6

The lightbox slideshow delay in seconds, floats are accepted as well for example 6.5 seconds.

rlSlideShowBkColor

Type: (String) - default: #2e2e2e

The lightbox slideshow circular animation background color.

rlSlideShowFillColor

Type: (String) - default: #FFFFFF

The lightbox slideshow circular animation fill color

rlUseKeyboard

Type: (String) - default: yes

This can be yes or no, add keyboard support.

rlUseDoubleClick

Type: (String) - default: yes

This can be yes or no, use double click or double tap to maximize and minimize.

rlShowCloseButton

Type: (String) - default: yes

This can be yes or no, show the lightbox close button.

rlShowFullscreenButton

Type: (String) - default: yes

This can be yes or no, show the lightbox fullscreen button.

rlShowZoomButton

Type: (String) - default: yes

This can be yes or no, show the lightbox zoom in and zoom out button.

rlShowCounter

Type: (String) - default: yes

This can be yes or no, show the lightbox counter.

rlShowNextAndPrevBtns

Type: (String) - default: yes

This can be yes or no, show the next and previous lightbox item button.

rlSpaceBetweenBtns

Type: (Number) - default: 3.5

Space/gap in px between lightbox buttons.

rlButtonsOffsetIn

Type: (Number) - default: 10

Space/gap between the buttons and the lightbox item.

rlButtonsOffsetOut

Type: (Number) - default: 10

Space/gap between the buttons and the window left or right side.

rlBackgroundColor

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

Main lightbox background RGBA color.

Methods

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

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

Mirror Media 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 fwdmmsAPI = setInterval(() =>{
if(window['fwdmms0']){
	console.log('LS API ready')
	clearInterval(fwdmmsAPI);

	// Register the LIKE event.
	fwdmms0.addEventListener(FWDMMS.ERROR, onEerror);
}
}, 100);


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

FWDMMS.ITEM_UPDATE

Dispatched when the slider item postions are changing.

FWDMMS.ERROR

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

Notes

Mirror Media Slider helps you build immersive, performant media galleries with Three.js, custom shaders, and flexible controls. Use the settings above to tune scale, motion, trails, and post-processing so the visuals match your brand and content.

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 gallery

Slider item parameters

Lightbox item parameters

Modify code

Settings

Example

instance

parentId

display

sliderDataId

initializeWhenVisible

maxWidth

maxHeight

autoScaleStartWidth

autoScale

stats

gui

showPreloader

preloaderColor

backgroundColor

infinite

bendStrength

gap

planeWidth

planeHeight

showMaskGradient

useCaption

captionPosition

useBlackAndWhite

opacityStrength

snap

twirl

twirlStrength

twirlStart

strongCurvedFlatSize

trailOffsetY

trailScale

maxBendSpeed

maxTrailSpeed

waveStrength

scrollSpeedStrength

curveDistortionStrength

liquidDistortionStrength

reflectionSize

reflectionOpacity

cameraPositionX

cameraPositionY

x

y

z

rotationX

rotationZ

antialias

waveFrequency

waveAmplitude

useNoise

noiseSize

noiseFadeSize

noiseBlurStrength

noiseFadeColor

flowmapRGBShift

flowmapRGBShiftAmount

flowmapRGBShiftStrength

flowmapStrength

flowmapRadius

flowmapSensitivity

flowmapForce

flowmapFalloff

rlPath

useLightbox

rlUseDeepLinking

rlItemBackgroundColor

rlDefaultItemWidth

rlDefaultItemHeight

rlItemOffsetHeight

rlItemOffsetHeightButtonsTop