@afiniti/parallax-slider-test v0.0.3

@afiniti/parallax-slider

Description

React slider component for images and videos. It provides option for both parallax and displacement 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 and displacement slidign effects
• Scroll to slide using mouse and trackpad
• Multiple callbacks for as much customization as possible

Props

Example Usage

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

import React from 'react';
import ParallaxSlider from '@afiniti/parallax-slider';
import '@afiniti/parallax-slider/lib/main.css';

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

const Slider = ({
  tiltBackground,
  sliderData,
  scrollToSlide,
  initialSlideIndex
}) => {
  return (
    <ParallaxSlider
      iterations={2}
      tiltBackground={tiltBackground}
      data={sliderData}
      scrollToSlide={scrollToSlide}
      parallaxSliderApi={ref => {
        this.parallaxSliderApi = ref;
      }}
      onSlideStart={(currentIndex, nextIndex, direction) => {}}
      initialSlideIndex={initialSlideIndex}
    />
  );
};

export default Slider;