0.0.4 • Published 4 years ago
@afiniti/webgl-slider v0.0.4
@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;