Package Exports

@afiniticom/video-player

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@afiniticom/video-player) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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

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`

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;