vue组件 .vue_猫头鹰传送带2的Vue组件

vue组件 .vue

VUE-猫头鹰轮播 (vue-owl-carousel)

The VueJS wrapper for Owl Carousel.

猫头鹰轮播的VueJS包装器。

Owl Carousel is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Owl Carousel是启用触摸的jQuery插件，可让您创建漂亮的响应式轮播滑块。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm i -s vue-owl-carousel or yarn add vue-owl-carousel

npm i -s vue-owl-carousel或yarn add vue-owl-carousel

用法 (Usage)

<script>

import carousel from 'vue-owl-carousel'

export default {
    components: { carousel },
}

</script>

Basic Usage

基本用法

<carousel>

    <img src="https://placeimg.com/200/200/any?1">

    <img src="https://placeimg.com/200/200/any?2">

    <img src="https://placeimg.com/200/200/any?3">

    <img src="https://placeimg.com/200/200/any?4">

</carousel>

Custom prev and next buttons using slot, the buttons will be hidden while start and end in non-loop mode

使用插槽自定义上一个和下一个按钮，在非循环模式下开始和结束时这些按钮将被隐藏

<carousel>

    <template slot="prev"><span class="prev">prev</span></template>

    //

    <template slot="next"><span class="next">next</span></template>

</carousel>

Set options,

设置选项

<carousel :autoplay="true" :nav="false">

//

</carousel>

Set events,

设置事件

<carousel @changed="changed" @updated="updated">

//

</carousel>

可用选项 (Available options)

Currently following options are available.

当前有以下选项可用。

• 项目 (items)

type : number

类型： number

default : 3

默认值： 3

The number of items you want to see on the screen.

您想在屏幕上看到的项目数。

• 保证金 (margin)

type : number

类型： number

default : 0

默认值： 0

Margin-right (px) on item.

项目的页边距右(px)。

• 循环 (loop)

type : boolean

类型： boolean

default : false

默认值： false

Infinity loop. Duplicate last and first items to get loop illusion.

无限循环。 复制最后一个和第一个项目以获得循环幻觉。

• 中央 (center)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Center item. Works well with even an odd number of items.

中心项。 适用于偶数个项目。

• 导航 (nav)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Show next/prev buttons.

显示下一个/上一个按钮。

• 自动播放 (autoplay)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Autoplay.

自动播放。

• 自动播放速度 (autoplaySpeed)

Type: Number/Boolean

类型： Number/Boolean

Default: false

默认值： false

Autoplay speed.

自动播放速度。

• 倒带 (rewind)

Type: Boolean

类型： Boolean

Default: true

默认值： true

Go backwards when the boundary has reached.

到达边界后向后走。

• mouseDrag (mouseDrag)

Type: Boolean

类型： Boolean

Default: true

默认值： true

Mouse drag enabled.

启用鼠标拖动。

• touchDrag (touchDrag)

Type: Boolean

类型： Boolean

Default: true

默认值： true

Touch drag enabled.

触摸拖动已启用。

• pullDrag (pullDrag)

Type: Boolean

类型： Boolean

Default: true

默认值： true

Stage pull to edge.

舞台拉到边缘。

• freeDrag (freeDrag)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Item pull to edge.

项目拉到边缘。

• stagePadding (stagePadding)

Type: Number

类型： Number

Default: 0

默认值： 0

Padding left and right on stage (can see neighbours).

在舞台上左右滑动(可以看到邻居)。

• autoWidth (autoWidth)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Set non grid content. Try using width style on divs.

设置非网格内容。 尝试在div上使用宽度样式。

• 自动高度 (autoHeight)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Set non grid content. Try using height style on divs.

设置非网格内容。 尝试在div上使用高度样式。

• 点 (dots)

Type: Boolean

类型： Boolean

Default: true

默认值： true

Show dots navigation.

显示点导航。

• autoplayTimeout (autoplayTimeout)

Type: Number

类型： Number

Default: 5000

默认值： 5000

Autoplay interval timeout.

自动播放间隔超时。

• autoplayHoverPause (autoplayHoverPause)

Type: Boolean

类型： Boolean

Default: false

默认值： false

Pause on mouse hover.

鼠标悬停时暂停。

• React灵敏 (responsive)

Type: Object

类型： Object

Default: {}

默认值： {}

Example : :responsive="{0:{items:1,nav:false},600:{items:3,nav:true}}"

示例：： :responsive="{0:{items:1,nav:false},600:{items:3,nav:true}}"

Object containing responsive options. Can be set to false to remove responsive capabilities.

包含响应选项的对象。 可以设置为false以删除响应功能。

翻译自: https://vuejsexamples.com/vue-component-for-owl-carousel-2/

vue组件 .vue