Shader Slider

What is Shader Slider

Shader Slider, a powerful, responsive, and customizable, versatile image and video slider, 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.

Main features

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

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

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

Six Built-In Transitions – There are six built-in transitions available between images/videos, each of which can be individually assigned to an image or video, with customizable transition durations.

Customizable Size – Shader Slider can be set to any width or height and can be added anywhere in your page or app, example here

Customizable Mouse Distortion – The slider can be set to slightly rotate the image/video in 3D space based on the mouse position.

Pin to scroll – The slider can be pinned while scrolling through the page, with the number of pinned pixels customizable as needed. In the following example, the slider remains pinned for 800 pixels before allowing the page to continue scrolling with the content, example here

Custom masks – the slider can have up to ten masks, in the following example there are five masks that animate over time, example here

Multiple Media File Format – Support for .mp4, .jpg, .jpeg, .webp, .png.

Caption – Optional caption formatted with CSS…

API Included – API Included.