@afiniti/parallax-slider

Description

React slider component for images and videos. It provides option for parallax effects for sliding animations.

Note

This is a work in progress, not ready for production yet. Your feedback would be appreciated, custom features can also be requested.

Requirements

Currently, works only for image urls from graph media cms. Support for other image sources will be added as enhanced feature later on.

Installation

npm i @afiniti/parallax-slider

Features

• Fullscreen slider
• Handles both images and videos.
• Parallax sliding effects
• Scroll to slide using mouse and trackpad
• Multiple callbacks for as much customization as possible
• Memory and performance optimization: pauses automatically if the current browser tab is inactive or if the browser itself is inactive.

Props

Name	Type	Description
data	object	Image or video sources in specified format.
autoplay	bool	Autoplay slider or not. Defaults to true
iterations	number	Number of iterations in case of autoplay. Defaults to infinite/null
slideSpeed	number	Duration in milisecond for slide enter/exit animation. Defaults to 1.6
scrollToSlide	bool	Change slides on mouse/trackpad scroll. Defaults to false.
autoplaySpeed	number	Duration in miliseconds for which each slide stays on screen. Defaults to 3000
tiltBackground	bool	Tilt effect on hover. Defaults to false
initialSlideIndex	number	Optional value in pixels if fixed height needs to be added to image elements.

Methods

Name	Description
pause	Pause the slider if autoplay enabled. slider.pause()
resume	Resume the slider if autoplay enabled. slider.resume()
slideTo	Transitions to slide with index provided. slider.slideTo(3)
isPaused	Returns if the autoplay is paused. slider.isPaused()
isSliding	Returns if the sliding animation is in progress. slider.isSliding()
slideNext	Number of iterations in case of autoplay. infinite/null
currentIndex	Returns index of active slide. slider.currentIndex()
slidePrevious	Optional value in pixels if fixed height needs to be added to image elements.
isIterateable	Returns if the slider has completed given iterations. slider.isIterateable()
updateScrollToSlide	Updates inital prop value given for scrollToSlide prop. slider.isIterateable()
updateTiltBackground	Updates inital prop value for updateTiltBackground. slider.updateTiltBackground()

Callbacks

Name	Description
parallaxSliderApi	Returns reference object for Slider API.
onSlideStart	Called on start of every slide transition onSlideStart(currentIndex, nextIndex, direction)
onSlideComplete	Called on end of every slide transition onSlideComplete()

Example Usage

The package can be integrated inside a react component as follows:

import React, { useRef } from 'react';
import ParallaxSlider from '@afiniti/parallax-slider';

const data={
  {title: "Image 1", Picturehandle: "LCcgeYuDSmeZZPu0hWRo"},
  {title: "Image 2", Picturehandle: "LCcgeYuDSmeZZPu0hWRo"},
  {title: "Image 3", Picturehandle: "LCcgeYuDSmeZZPu0hWRo"}
};

const Component = () => {
  const parallaxSliderApi = useRef();

  return (
    <ParallaxSlider
      autoplay
      data={data}
      scrollToSlide
      iterations={2}
      tiltBackground
      initialSlideIndex={0}
      parallaxSliderApi={ref => {
        parallaxSliderApi.current = ref;
      }}
      onSlideStart={(currentIndex, nextIndex, direction) => {}}
    />
  );
};

export default Component;