Shader Infinite Slider

About

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.

90 + Cusomizable settings

Experience our fully customizable Shader Infinite Slider – we've thought of everything to create a seamless and immersive experience!

WordPress, WooCommerce, JavaScript versions

Versatile Shader Infinite Slider—designed to work seamlessly with WordPress, WooCommerce, and JavaScript.

Created by Elite Author

Experience the power of elite innovation. As a top Envato author since 2012, I create plugins that fuse cutting-edge technology with timeless design, driving your projects to success.

Powered by Three.js

Experience a true 3D infinite slider powered by WebGL and Three.js. Each item bends with realistic motion and smooth physics-based transitions, creating an immersive and seamless scrolling experience.

Fully customizable

Take control of your interactive experience with our fully customizable Shader Infinite Slider. Adjust responsive dimensions, fine-tune distortion and motion effects, and enjoy intuitive controls for a smooth, visually captivating scroll journey.

Try our demos

These are just some examples we created. They are included as templates for easy access. The possibilities are endless! Open the live settings panel on the examples and experiment with the settings.

Other 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

The slider can be set to either vertical or horizontal mode. View horizontal example.

Custom Camera Position

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 scale – Fine-tune the scroll scale 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.