https://github.com/wunci/swipe

Swipe is touch slider
https://github.com/wunci/swipe

slider slider-plugin swipe

Last synced: over 1 year ago
JSON representation

Swipe is touch slider

• Host: GitHub
• URL: https://github.com/wunci/swipe
• Owner: wunci
• License: mit
• Created: 2018-06-18T14:44:02.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-28T03:34:37.000Z (about 8 years ago)
• Last Synced: 2025-01-25T17:11:18.378Z (over 1 year ago)
• Topics: slider, slider-plugin, swipe
• Language: JavaScript
• Homepage: http://www.wclimb.site/swipe/
• Size: 35.2 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Swipe

Swiper is touch slider

[在线预览](http://www.wclimb.site/swipe/)

暂时可配置列表（可扩展实现常见的大部分功能）

1. 分页

2. 分页是否可点击

3. 自动轮播（设置时间）

4. 上一页下一页

5. 监听动画结束

6. 设置开始位置（从1开始）

7. 设置过渡时间

# 例子

html

> css自行引入

```html

    


        


            


                slide1

            

            


                slide2

            

            


                slide3

            

            


                slide4

            

        

        


        


        


    

```

js

```js

var swiper = new Swipe('.main',{

        startSlide: 1, // 开始位置从1开始

        speed: 500, // 过渡时间

        pagination:{

            el: '.pagination',// 分页元素

            clickAble: true // 分页可点击

        },

        autoplay: 3000,// 设置自动轮播

        navigation:{

            next:'.swipe-btn-next', // 前进

            prev:'.swipe-btn-prev', // 后退

        },

        // 动画结束回调

        transitionEnd:function(swipe){

            console.log('realIndex',swipe.realIndex)

        },

    })

```