@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;