parallel-scroll-slider

This package provides a slider scrolled parallel direction when browser is scrolled vertically.

Install

npm i parallel-scroll-slider

How to use

import ParallelScrollSlider from "parallel-scroll-slider"

const Sample = () => {
  return (
  <ParallelScrollSlider
    fromTop={0}
    slideGap={40}
    slidePaddingY={20}
    slideWidth={"100%"}
    list {[]}
    stopPos={"start"}
   />
  )
}

Instance Props

Property	Type	Required	Description
fromTop	number / string	optional	Slider's position from top
slideGap	number / string	required	Gap each lists
slidePaddingY	number / string / {top: number / string, bottom: number / string}	optional	Padding of top and bottom
slideWidth	string	required	Each lists' width
list	JSX.Element[]	required	Slider's contents
stopPos	start / center / end	required	Stopped position
fullWidth	boolean	optional	Display range of slider

Props' Description

fromTop: Decided the position of component from top. fromTop = 0 equals top: 0, and fromTop = "10%" equals top: "10%". default value: fromTop = 0.

slideGap: Decided the gap of each slide contents. slideGap = 0 equals column-gap: 0, and slideGap = "10%" equals column-gap: "10%".

slidePaddingY: Decided the padding of top and bottom. if you want one's size is different from the other, you can write like slidePaddingY={{top:10, bottom:20}}. default value: slidePaddingY = 0.

slideWidth: Decided the size of each lists. the size is relatively decided component's width. you can define the percentage like slideWidth={"50%"}.

list: The contents of slide. You don't need to define <li> tags width and height. They are automatically decided by other argument you input.

stopPos: Decided the position when the slide is stopped. "start" : left edge of component. "center" : center position. "end" : right edge of component. default value: stopPos: "start".

fullWidth: Choose the display range of slider. fullWidth: true means the slider displays from left edge to right edge. fullWidth: false means the slider display in just component width. default value: fullWidth: true.