Needless Patchouli Manufacture
    Have ideas to improve npm?Join in the discussion! »

    wl-stl-swiper

    1.0.3 • Public • Published

    简易swiper组件(h5 lable切换,轮播图)

    使用方法

    npm install @stl/stl-swiper
    
    css:
        import "/node_modules/@stl/stl-swiper/index.css"
    
    html:
     <div class="page" id="page">   
            <div class="stl-switch-thumbs"></div>//导航栏需添加"stl-switch-thumbs"类名   
            <div class="page_content stl-switch-wrapper">//此元素需添加"stl-switch-wrapper"类名    
                <div class="page_item page_one stl-switch-slider">1</div>//此元素需添加"stl-switch-slider"类名   
                <div class="page_item page_two stl-switch-slider">2</div>   
                <div class="page_item page_three stl-switch-slider">3</div>     
                <div class="page_item page_four stl-switch-slider">4</div>   
                <div class="page_item page_five stl-switch-slider">5</div>   
                <div class="page_item page_six stl-switch-slider">6</div>   
                <div class="page_item page_serven stl-switch-slider">7</div>       
            </div>
        </div>
    ts:
        new stlSwiper(document.getElementById("page"),{
        //slidesPerView:3,
        //autoHeight:true,
         //autoplay:{},
         thumbs:{
             list:["第一个","<a>第二个</a>","第三个","第四个","第五个","第六个","第七个"],
             thumbsPerview:2
         },
         loop:true,
        scrollBar:{dragSize:"50%"},
        pagination:{}
    });
    

    参数说明

    interface scrollBar{
        el?:HTMLElement
        dragSize?:string
    }
    interface autoplay{
        delay?:number
        
    }
    interface thumbs{
        list:Array<string>
        thumbsPerview?:number
    }
    interface pagination{
        ele?:HTMLElement|Element
    }
    
    interface navigation{
         nextEl?:HTMLElement|Element
        prevEl?:HTMLElement|Element
        autoHide?:boolean
    }
    
    interface parameter{
        loop?:boolean 是否循环切换 默认为false
        slidesPerView?:number|string 设置slider容器能够同时显示的slides数量 默认为1(此参数与loop,autoplay,pagination,thumbs参数会有冲突)
        autoHeight?:boolean 设置slider容器高度是否自适应slider的高度 默认为false
        speed?:number 切换动画的时长 默认300 单位ms
    
        autoplay?:{ //是否自动切换 如果不需要传delay参数则此参数传"{}"则会自动切换
            delay?:number//间隔时间 默认3000 单位ms
        }  
        scrollBar?:{//是否有滚动条 如果不需要传el和dragSize参数则此参数传"{}"则会添加滚动条
            el?:HTMLElement//滚动条父元素,如果不传则会自动生成滚动条父元素
            dragSize?:string//滚动条指示的尺寸 默认为对应slider数量的百分比 如slider为2个时 宽度为50%
        }
        thumbs?:thumbs{//缩略图或标题栏 
            list:Array<string> 每个slider对应的缩略图或标题,数量必须与slider数量对应
            thumbsPerview?:number 设置slider容器能够同时显示thumbs的数量
            clickCallback?:()=>viod 点击缩略图的回调
        }
        pagination?:{//分页器(小圆点)如果不需要传ele参数则此参数传"{}"则会添加分页器
            ele?:HTMLElement|Element//分页器父元素 不传则默认生成父元素
        }
        navigation?:{//左右切换按钮
            nextEl?:HTMLElement|Element//切换下一张按钮,如果不传则会动态生成
            prevEl?:HTMLElement|Element//切换上一张按钮,如果不传则会动态生成
            autoHide?:boolean//切换到第一张、最后一张是否隐藏对应按钮,如果需要自己处理则在sliderEnd的回调函数中处理  函数中this.item表示当前显示的下标,this.length表示长度。
        }
        sliderStart?:()=>void 切换开始的回调
        sliderEnd?:()=>void 每次切换结束的回调 方法中this.item表示当前显示slider的下标
    }
    

    文件介绍

    ├── config  配置文件
    │    ├── karma 单元测试生成报告的文件
    │    └── build 配置需要生成的文件
    ├── src  开发文件夹
    ├── test    单元测试文件夹
    │    └── hello.component.test   karam-test -> hello.component ts文件的单元测试
    │── dist  生产文件夹
    ├── karma.conf.js   单元测试的配置文件
    └── rollup.config.js   rollup的配置文件
    

    Keywords

    Install

    npm i wl-stl-swiper

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    93.2 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar