ORIGINAL
A real 3D slider
INNOVATIVE
WebGL technology applied
CROSS PLATFORM
Tested on several devices
ELEGANT
Suitable for any context
SIMPLE TO USE
Few settings easy to set up
3D Slider jQuery Plugin
The new awesome and innovative way to show your photos on your website!
3D Slider takes advantage of the latest web technologies, especially the WebGL library.
Everything is showed in a real 3D world and you are able to change many different settings to customize your experience.
Great performance!
From desktop to mobile device.
Everything has been tested on several devices to grant always the best experience.
The slider detects whenever it's loaded on mobile device and automagically applies specific settings to increase the performance.
Nike Air Max
Nike Shoes
Woman Shoe
Air Jordan
Air Jordan
Nike Shoes
Comfortable Shoes
Nike Free
Nike Free
Embed it everywhere!
You can show your slider wherever you want.
Choosing different settings for each slider is super easy.
Every instance may have its own background, images, text and even fonts!
‹div id="threeDSliderDiv" class="threedslider"›
‹!-- Slide 1 --›
‹div data-line-color="#000000"›
‹a href="#" target="_blank"›
‹img src="..."›
‹/a›
‹h2 class="threedslider-slide-title"›Nike Air Max‹/h2›
‹p class="threedslider-slide-subtitle"›$150,00‹/p›
‹/div›
‹!-- Slide 2 --›
‹div data-line-color="#000000"›
‹img src="..."›
‹h2 class="threedslider-slide-title"›Nike Shoes‹/h2›
‹p class="threedslider-slide-subtitle"›$110,00‹/p›
‹/div›
...
‹/div›Show your content in a
Real 3D World
Elegant and simple code.
Set the options according to your needs, control the 3D camera with specific settings, choose your background.
A simple setup to make the magic happens!
jQuery('#threeDSliderDiv').threeDSlider({
envPreset: 'adams_place_bridge',
desktop: {
cameraZoom: 100,
speed: {
slow: 1.6,
fast: 18.0
}
}
});Dedicated setup for mobile devices.
You can differentiate the camera properties on mobile devices to achieve the best results.
jQuery('#threeDSliderDiv').threeDSlider({
envPreset: 'studio',
desktop: {
cameraZoom: 100,
speed: {
slow: 1.6,
fast: 18.0
}
},
mobile: {
cameraZoom: 90,
speed: {
slow: 2.0,
fast: 20.0
}
}
});3D environments included!
You can select from many different background presets.
Choose your favourite background by defining it into the initial settings or simply create your own preset.
You can specify the url of an equirectangular image, a HDR source light, background blur and many more settings.
Visit HDRIHaven.com for high quality HDRIs for free!
jQuery('#threeDSliderDiv').threeDSlider({
envPreset: 'small_hangar', // Choose from many different presets
});
jQuery('#threeDSliderDiv').threeDSlider({
// Type the absolute url of your preset directory
envPreset: 'https://www.my-url.com/threedslider/presets/‹your-preset-url›/',
});