🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

carousel-html5

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

carousel-html5 - npm Package Compare versions

Comparing version
1.0.1
 to
1.0.2
+39
README2.md
# carousel
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
## 用法
ES6
```js
import Carousel from 'Carousel'
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
```html
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
```
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
+51
static/README.md
# vue-drag
> vue drag based on HTML5
## Build Setup
# install
npm install vuedrag-html5
# use
```html
<vuedrag v-model="articles">
<template scope="props">
<li v-for="(article, index) in articles"
draggable="true"
@dragstart="props.dragStart">
{{article.label}}<br>{{article.value}}
</li>
</template>
</vuedrag>
```
```javascript
import vuedrag from 'vuedrag-html5'
export default {
name: 'app',
data () {
return {
articles: [
{
label: '第一个',
value: 10
},
{
label: '第二个',
value: 20
},
{
label: '第三个',
value: 30
}
]
}
},
components: {
vuedrag
}
}
```
## git
For detailed [git](https://github.com/juzhikan/vue-drag)
+39
static/README2.md
# carousel
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
## 用法
ES6
```js
import Carousel from 'Carousel'
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
```html
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
```
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
+1
-1
package.json
{
"name": "carousel-html5",
"version": "1.0.1",
"version": "1.0.2",
"description": "carousel",

@@ -5,0 +5,0 @@ "main": "dist/carousel.js",

+44
-32
README.md

@@ -1,39 +0,51 @@

# carousel
# vue-drag
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
> vue drag based on HTML5
## 用法
## Build Setup
ES6
```js
import Carousel from 'Carousel'
# install
npm install vuedrag-html5
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
# use
```html
<vuedrag v-model="articles">
<template scope="props">
<li v-for="(article, index) in articles"
draggable="true"
@dragstart="props.dragStart">
{{article.label}}<br>{{article.value}}
</li>
</template>
</vuedrag>
```
```javascript
import vuedrag from 'vuedrag-html5'
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
export default {
name: 'app',
data () {
return {
articles: [
{
label: '第一个',
value: 10
},
{
label: '第二个',
value: 20
},
{
label: '第三个',
value: 30
}
]
}
},
components: {
vuedrag
}
}
```
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
## git
For detailed [git](https://github.com/juzhikan/vue-drag)