Repository files navigation

Full Screen React Page slider. Navigational bars, mouse wheels, and mobile touch are available. Supports asynchronous rendering of various types of components.

$ npm install page-slider-react

• page-slider-react must always be in a component that is100%width andheight.
• Css embedded inpage-slider-react contains code for adjusting theheight of the elements to100%.

body,html {height:100%;margin:0;padding:0;}body {overflow: hidden;}#root,.App {height:100%;}

importReactfrom'react';functionTestComp01(){return<divclassName="test-comp">Test Component</div>;}exportdefaultTestComp01;

importReactfrom'react';import{PageSlider}from'page-slider-react';importTestCompfrom'./components/TestComp';functionApp(){constcompList=[TestComp,// Functional Component<TestComp/>,// React Node()=>TestComp,// Function that returns Functional Componentasync()=>{// Asynchronous function that returns Functional ComponentawaitnewPromise(resolve=>setTimeout(resolve,2000));returnTestComp;},()=>import('./components/TestComp'),// Dynamic Import];return(<divclassName="App"><PageSlidercompList={compList}/></div>);}

List of compositions to show on the slider. It is an essential Property.

If this value istrue then the horizontal slider is created, and iffalse then the vertical slider is created. Default value isfalse.

Specifies the time between slide actions. The smaller the value, the shorter the time between the action and the action. If this value is too short, two actions can be taken at a time of scrolling. Default value is500.

Adjust sensitivity for mouse scrolling and mobile touch. The smaller the number, the more sensitive. Default value is80.

Specify detailed settings for the navigation bar.

• type: Specify locate of navigation bar. Enter eithertop,right,bottom,left, ornone. If you typenone, the navigation bar is not visible. Default value isnone.
• hide: Make the navigation bar invisible when not in use. Default value isfalse.
• timer: Set the time navigation bar is displayed when thehide istrue. The unit is milliseconds. Default value is2000.
• size: Specify the size of navigation bar. Style unit is internally usedem, navigation bar is resized to match the changes of this value. Default value is16.
• unit: It is a unit of size. Enter eitherpx,em,rem,vh,vw or'%'. Default value ispx.

<PageSlidercompList={compList}horizontal={false}actionFlagTime={500}sensitivity={100}navigation={{type:'right',hide:true,timer:2000,size:16,unit:'px',}}/>

$ npm install$ npm run build$ npm run build:types$cd example$ npm install$ npm start