my-full-page v1.0.0

使用方法

    npm install my-full-page --save-dev

使用示例

html代码

    <div class="box">
        <div class="ql-fullpage-container">
            <div class="ql-fullpage-list">
                <div class="ql-fullpage-slide">
                    <div class="page page1">page1</div>
                </div>
                <div class="ql-fullpage-slide">
                    <div class="page page2">page2</div>
                </div>
                <div class="ql-fullpage-slide">
                    <div class="page page3">page3</div>
                </div>
                <div class="ql-fullpage-slide">
                    <div class="page page4">page4</div>
                </div>
            </div>   
        </div>
    </div>

js代码

    window.onload = function() {
        const p = new MyFullPage({
            // direction: 'vertical',
            direction: 'horizontal',
            beforeChange: (oldIndex) => {
                console.log(oldIndex, 'oldIndex')
            },
            afterChange: (curIndex) => {
                console.log(curIndex, 'curIndex')
            },
        })
        setTimeout(() => {
            p.slideTo(1)
        }, 2000);
    }

配置项

    direction: 'horizontal', // vertical:垂直 horizontal:水平
    threshold: 0.2, // 滚动阈值
    transTime: 500, // 过渡时间
    initIndex: 1, // 初始化轮播下标
    pageContainer: null, // 外层div可以限制轮播大小
    beforeChange: () => {
        console.log('beforeChange')
    },
    afterChange: () => {
        console.log('afterChange')
    },