Shader Infinite Slider

What is Shader Infinite Slider

Experience a true 3D slider built with WebGL and Three.js. Enjoy smooth infinite scrolling and realistic item bending for a visually immersive effect.

Main features

Responsive Layout – Fully responsive and adaptable regardless of which device is used.

Desktop & Mobile Optimized -Shader Infinite Slider will adapt to any screen size and any device, wheater you are using a mobile phone (IOS, Iphone, Android) or on your desktop browser.

Lazy Scrolling/Loading – Option to initialize Shader Infinite Slider on scroll when the carousel is visible in the page, this way for example if the carousel is in a section that is not visible it will not be initialized, instead Shader Infinite Slider will be initialized only when the user will scroll to the section in which the carousel is added.

Customizable Size – SIS can be set to any width or height and placed anywhere on your page or app. Additionally, items size and ratio can be set as needed.

Preloader – Optional animated preloader.

Items Ratio – SIS can seamlessly change the items aspect ratio, allowing you to display any formats (portrait, landscape and any variation).

Customizable Color Theme – All aspects of the color theme can be customized—buttons, backgrounds, etc.

Infinite Loop – Optional infinite loop and non-infinite loop.

Horizontal and Vertical Layout – This is real 3D, so the camera position in 3D space can be customized as needed for both vertical and horizontal versions..

Noise Distortion – Customizable noise distortion for the items, example here.

Caption – Optional caption. The caption can be styled with CSS to match your visual design.

Mouse Ripple – Optional ripple effect triggered by mouse movement, with adjustable strength.

Black And White – Optional: Desaturate non-centered items. Items outside the center will appear in black and white.

Opacity strength – Optional: Set custom opacity for non-centered items. Items outside the center will appear with reduced opacity.

Snap – Optional: Snap – Automatically snap the closest item to the center.

Scroll speed strength – Customizable scroll speed – Fine-tune the scroll speed to match your desired experience.

Scroll scale strength – Customizable scroll speed – Fine-tune the scroll speed to match your desired experience.

Default And Scroll Curvature – Customizable default and scroll curvature – Adjust the item curvature at rest and while scrolling to suit your design.

Liquid Distortion – Customizable liquid distortion – Cusotmizable item liquid disotrtion based on the scroll speed.

Post Processing – Shaders that improve antialiasing for a crisp, clean look. Includes effects like grid distortion, fluid distortion, glitch distortion, after image and more.