vue.js轮播图组件_轮播组件No用Vue.js编写的jQuery

vue.js轮播图组件

Vue微型滑块2.0 (tiny-slider 2.0 for Vue)

A carousel component created by ganlanyuan, written in Vue.js. No jQuery. Works in IE8+.

由ganlanyuan创建的轮播组件，用Vue.js编写。 没有jQuery。 适用于IE8 +。

Vanilla javascript slider for all purposes created by ganlanyuan in Vue.

Vanilla javascript滑块，由ganlanyuan在Vue中创建。

Wrapper for Tiny slider for all purposes by ganlanyuan in Vue.

Vue中的ganlanyuan提供的适用于所有目的的Tiny滑块包装。

Firefox 12+, Chrome 15+, Safari 4+, Opera 12.1+, IE8+

Firefox 12以上版本，Chrome 15以上版本，Safari 4以上版本，Opera 12.1以上版本，IE8以上版本

View demo 查看演示 Download Source 下载源

安装 (Install)

npm install vue-tiny-slider

npm install vue-tiny-slider

用 (Use)

import VueTinySlider from 'vue-tiny-slider';

new Vue({
  components: {
    'tiny-slider': VueTinySlider
  }
})

<tiny-slider :mouse-drag="true" :loop="false" items="2" gutter="20">
  <div>Slider item #1</div>
  <div>Slider item #2</div>
  <div>Slider item #3</div>
  <div>Slider item #4</div>
  <div>Slider item #5</div>
  <div>Slider item #6</div>
</tiny-slider>

造型 (Styling)

SCSS

SCSS

@import 'tiny-slider/src/tiny-slider';

CDN

CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.3.5/tiny-slider.css">

选件 (Options)

items
mode
gutter
edge-padding
fixed-width
slide-by
controls
controls-text
controls-container
nav
nav-container
arrow-keys
speed
autoplay
autoplay-timeout
autoplay-direction
autoplay-text
autoplay-hover-pause
autoplay-button
autoplay-button-output
autoplay-reset-on-visibility
animate-in
animate-out
animate-normal
animate-delay
loop
rewind
auto-height
responsive
lazyload
touch
mouse-drag
nested
freezable
disable
on-init

For more detailed information about the options, see the Tiny-slider documentation (Options).

有关这些选项的更多详细信息，请参见Tiny-slider文档(选项) 。

方法 (Methods)

getInfo goTo destroy

getInfo goTo destroy

For more detailed information about the methods, see the Tiny-slider documentation (Methods).

有关这些方法的更多详细信息，请参见Tiny-slider文档(方法) 。

去做 (Todo)

• Add demo link from a fiddle or something similar

  从小提琴或类似的东西中添加演示链接

• Better handling of the responsive-settings

  更好地处理响应设置

• Add Custom Events

  添加自定义事件

• Add Methods

  新增方法

翻译自: https://vuejsexamples.com/a-carousel-component-no-jquery-written-in-vue-js-2/

vue.js轮播图组件