@afiniti/webgl-slider

React component for webgl slider for videos and images

Usage no npm install needed!

<script type="module">
  import afinitiWebglSlider from 'https://cdn.skypack.dev/@afiniti/webgl-slider';
</script>

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: "LCcgeYuDSmeZZPu0hWRo"},
  {Picturehandle: "LCcgeYuDSmeZZPu0hWRo"},
  {Picturehandle: "LCcgeYuDSmeZZPu0hWRo"}
};

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;