react-fullslip

基于react的竖向全屏滚动插件Vertical full screen rolling plugin based on react

Usage no npm install needed!

<script type="module">
  import reactFullslip from 'https://cdn.skypack.dev/react-fullslip';
</script>

README

fullSlip

基于react的竖向全屏滚动插件

依赖

  • react

安装

npm install react-fullslip

引入

import {FullSlip,SlipItem} from "react-fullslip";

配置参数

let options = {
  navigation: true,           //是否开启导航点,      默认为true
  activeClass: 'active',      //自定义导航点类名,    默认为active, .navigation-dot下的.active
  duration:1000,              //屏幕滑动切换的时间,  默认为1000
  transverse:true,            //是否更改为横向滑动,  默认为false
  navImage:[require('./assets/1.jpg'),require('./assets/2.jpg'),require('./assets/3.jpg')]    //导航点图片,可选,默认无图片
  arrowNav:true,              //是否开启箭头导航     默认false不开启
};

使用

<FullSlip {...optoins}>
  <SlipItem style={{backgroundColor:'#C6E2FF'}}>
    page1
  </SlipItem>
  <SlipItem style={{backgroundColor:'#C1FFC1'}}>
    page2
  </SlipItem>
  <SlipItem style={{backgroundColor:'#FFEC8B'}}>
    page3
  </SlipItem>
</FullSlip>