React component for parallax slider for videos and images

Usage no npm install needed!

<script type="module">
  import afinitiParallaxSlider from 'https://cdn.skypack.dev/@afiniti/parallax-slider';




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


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


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


npm i @afiniti/parallax-slider


  • 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


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


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 (
      parallaxSliderApi={ref => {
        this.parallaxSliderApi = ref;
      onSlideStart={(currentIndex, nextIndex, direction) => {}}

export default Component;