@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

Props

Name	Type	Description
data	object	Image or video sources in specified format.
iterations	number	Number of iterations in case of autoplay. Defaults to infinite/null
initialSlideIndex	number	Optional value in pixels if fixed height needs to be added to image elements.
scrollToSlide	bool	Change slides on mouse/trackpad scroll. Defaults to false.
tiltBackground	bool	Tilt effect on hover. Defaults to false
autoplay	bool	Autoplay slider or not. Defaults to true

Methods

Name	Args	Description
pause	none	Pause the autoplay.
resume	none	Start the autoplay.
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
updateTiltBackground	true/false	Enable/Disable Tilt effect on hover.

Example Usage

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

import React 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 = () => {
  return (
    <ParallaxSlider
      iterations={2}
      data={data}
      scrollToSlide
      tiltBackground
      parallaxSliderApi={ref => {
        this.parallaxSliderApi = ref;
      }}
      onSlideStart={(currentIndex, nextIndex, direction) => {}}
      initialSlideIndex={0}
    />
  );
};

export default Component;