npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wl-stl-swiper

v1.0.3

Published

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

Downloads

2

Readme

简易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的配置文件