README
@afiniti/webgl-slider
Description
React slider component for images and videos. It provides option for webgl effects for sliding animations.
Requirements
Currently, works only for images and videos.
Installation
npm i @afiniti/webgl-slider
Features
- Fullscreen slider
- Handles both images and videos.
- Webgl transition effects.
- Multiple callbacks for as much customization as possible
Props
Name | Type | Description |
---|---|---|
fps |
number |
In order to keep performance in mind if it is a video carousel then use your desired fps to keep memory and cpu usage as less as possible. Defaults to null it will collect browser refresh rate. |
data |
object |
Image or video sources in specified format. |
effect |
number |
Currently 8 different types of webgl effects are available pass number between 1 to 8. |
iterations |
number |
Number of iterations in case of autoplay. Defaults to infinite/null |
autoplay |
bool |
Autoplay slider or not. Defaults to true |
autoplaySpeed |
number |
Set autoplay slide speed . Defaults to 3000 3 seconds |
slideSpeed |
float |
Set slide effect speed. Defaults to 1.6 1.6 seconds |
scrollToSlide |
bool |
Change slides on mouse/trackpad scroll. Defaults to false . |
initialSlideIndex |
number |
Optional value in pixels if fixed height needs to be added to image elements. |
Methods
Name | Args | Description |
---|---|---|
pause |
none |
Pause the autoplay. |
resume |
none |
Start the autoplay. |
pauseRender |
none |
Pause requestanimationframe to save battery and memory. |
resumeRender |
none |
Resume requestanimationframe. |
SlideNext |
none |
Go to the next slide. |
slidePrevious |
none |
Go to the previous slide. |
updateScrollToSlide |
true/false |
Enable/Disable slides Change on mouse/trackpad scroll |
Callbacks
Name | Description |
---|---|
onSlideStart |
returns currentIndex, nextIndex, direction, Triggers on slide start |
onSlideComplete |
returns nothing, Trigger when slide ends |
webglSliderApi |
return ref of the slider to give access to all available methods |
Example Usage
The package can be integrated inside a react component as follows:
import React from 'react';
import WebglSlider from '@afiniti/webgl-slider';
const data={
{Picturehandle: "https://images.unsplash.com/photo-1603993097397-89c963e325c7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"},
{Picturehandle: "https://images.unsplash.com/photo-1618580987827-8d73bdd196aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"},
{Picturehandle: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1489&q=80"}
};
OR
const data={
{videoHandle: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},
{videoHandle: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"},
{videoHandle: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}
};
// you can get public test videos from here: https://gist.github.com/jsturgis/3b19447b304616f18657
const Component = () => {
return (
<WebglSlider
fps={25}
autoplay
effect={4} // give number between 1 to 8
iterations={2}
slideSpeed={1.6}
data={webglData}
autoplaySpeed={8000}
initialSlideIndex={0}
onSlideStart={(currentIndex, nextIndex, direction) => {
console.log(currentIndex, nextIndex, direction);
}}
onSlideComplete={() => {
console.log('complete');
}}
webglSliderApi={ref => {
// get access to slider's methods
console.log('ref', ref);
}}
/>
);
};
export default Component;