@63pokupki/vue-carousel 中文文档教程

发布于 3年前 浏览 26 更新于 3年前

FORK FROM 'Vue Carousel'

Improvements

  • Bug fix: false click when scroll vertical. Added a check for y-axis deviation

Original readme below

构建状态覆盖状态

警告:vue-carousel 处于开发的 pre-alpha 阶段,可能会发生重大变化。

请随时提交问题和功能请求此处

完整文档和示例

Table of Contents

Installation

npm install vue-carousel

或者如果您更喜欢 yarn

yarn add vue-carousel

Usage

Global

您可以全局安装 Vue Carousel:

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

这将使可用于 Vue 应用程序中的所有组件。

Local

使用 import 将轮播直接包含到您的组件中:

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

Configuration

PropertyTypeDefaultDescription
adjustableHeightBooleanfalseAdjust the height of the carousel for the current slide.
adjustableHeightEasingStringSlide transition easing for adjustableHeight. Any valid CSS transition easing accepted.
autoplayBooleanfalseFlag to enable autoplay.
autoplayDirectionStringforwardSets the autoplay direction for the carousel during autoplay. By default it is forward but can also be set to backward. If an incorrect string is supplied it will default to forward.
autoplayHoverPauseBooleantrueFlag to pause autoplay on hover.
autoplayTimeoutNumber2000Time elapsed before advancing slide in autoplay.
centerModeBooleanfalseCenter images when the size is less than the container width.
easingStringeaseSlide transition easing. Any valid CSS transition easing accepted.
loopBooleanfalseFlag to make the carousel loop around when it reaches the end.
minSwipeDistanceNumber8Minimum distance for the swipe to trigger a slide advance.
mouseDragBooleantrueFlag to toggle mouse dragging.
navigateToNumber, Array0Listen for an external navigation request using this prop. When the supplied prop is of type Number the slide with the matching index is animated into view, however you can disable this animation by supplying an Array consisting of exactly two element: the new slide index and a boolean indication whether the change should be animated or not (eg. [3, false] would mean "go to the slide with index 3 without animation").
navigationClickTargetSizeNumber8Amount of padding to apply around the label in pixels.
navigationEnabledBooleanfalseFlag to render the navigation component (next/prev buttons).
navigationNextLabelStringText content of the navigation next button.
navigationPrevLabelStringText content of the navigation prev button.
paginationActiveColorString#000000The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationColorString#efefefThe fill color of pagination dots. Any valid CSS color is accepted.
paginationPositionStringbottomThe position of pagination dots. Possible values are bottom, bottom-overlay, top and top-overlay. The overlay values place the pagination component over the images.
paginationEnabledBooleantrueFlag to render pagination component.
paginationPaddingNumber10The padding inside each pagination dot. Pixel values are accepted.
paginationSizeNumber10The size of each pagination dot. Pixel values are accepted.
perPageNumber2Maximum number of slides displayed on each page.
perPageCustomArrayConfigure the number of visible slides with a particular browser width. This will be an array of arrays, ex. [[320, 2], [1199, 4]]. Formatted as [x, y] where x=browser width, and y=number of slides displayed. Ex. [1199, 4] means if (window >= 1199) then show 4 slides per page.
resistanceCoefNumber20Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.
scrollPerPageBooleantrueScroll per page, not per item.
spacePaddingNumber0Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.
spacePaddingMaxOffsetFactorNumber0Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding.
speedNumber500Slide transition speed. Number of milliseconds accepted.
tagNameStringslideName (tag) of slide component. Overwrite with coponent name when extending slide component.
touchDragBooleantrueFlag to toggle touch dragging.
valueNumberSupport for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount).

Events

EventTypeEmitterDescription
navigation-clickCarouselEmits when the a navigation button is clicked, with the current direction (backward or forward)
pagination-clickCarouselEmits when a pagination button is clicked, with the current pageNumber
page-changeNumberCarouselEmits with the current page number.
slide-clickObjectSlideEmits with the dataset object of the selected element ··
transition-startCarouselEmits when the transition end is reached
transition-endCarouselEmits when the transition start is reached ·

还会发出上述事件的小写版本,即 pagechangeslideclicktransitionstart 和 <代码>过渡结束。

HTML Structure

一旦全局安装或导入了 CarouselSlide 组件,就可以按以下方式在模板中使用它们:

  <carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

要监听 'slideclick' 事件,您可以执行以下操作:

  <carousel>
    <slide
        data-index="0"
        data-name="MySlideName"
        @slideclick="handleSlideClick">
      Slide 1 Content
    </slide>
    ...
  </carousel>
  handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
  }

Development

沙盒开发环境由 vue-play 提供。 对组件文件所做的更改将实时显示在沙箱中。

要开始开发,请运行:

yarn install
yarn dev

然后导航到 http://localhost:5000

要修改和添加沙箱场景,请编辑 play/index.js

License

此项目已获得 MIT 许可许可证 - 请参阅 LICENSE.md 文件了解详细信息。

FORK FROM 'Vue Carousel'

Improvements

  • Bug fix: false click when scroll vertical. Added a check for y-axis deviation

Original readme below

Build StatusCoverage StatusLatest Stable Version

WARNING: vue-carousel is at pre-alpha stage of development and may undergo significant changes.

Feel free to submit issues and feature requests here.

Full documentation and examples

Table of Contents

Installation

npm install vue-carousel

or if you prefer yarn

yarn add vue-carousel

Usage

Global

You may install Vue Carousel globally:

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

This will make <carousel> and <slide> available to all components within your Vue app.

Local

Include the carousel directly into your component using import:

import { Carousel, Slide } from 'vue-carousel';

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

Configuration

PropertyTypeDefaultDescription
adjustableHeightBooleanfalseAdjust the height of the carousel for the current slide.
adjustableHeightEasingStringSlide transition easing for adjustableHeight. Any valid CSS transition easing accepted.
autoplayBooleanfalseFlag to enable autoplay.
autoplayDirectionStringforwardSets the autoplay direction for the carousel during autoplay. By default it is forward but can also be set to backward. If an incorrect string is supplied it will default to forward.
autoplayHoverPauseBooleantrueFlag to pause autoplay on hover.
autoplayTimeoutNumber2000Time elapsed before advancing slide in autoplay.
centerModeBooleanfalseCenter images when the size is less than the container width.
easingStringeaseSlide transition easing. Any valid CSS transition easing accepted.
loopBooleanfalseFlag to make the carousel loop around when it reaches the end.
minSwipeDistanceNumber8Minimum distance for the swipe to trigger a slide advance.
mouseDragBooleantrueFlag to toggle mouse dragging.
navigateToNumber, Array0Listen for an external navigation request using this prop. When the supplied prop is of type Number the slide with the matching index is animated into view, however you can disable this animation by supplying an Array consisting of exactly two element: the new slide index and a boolean indication whether the change should be animated or not (eg. [3, false] would mean "go to the slide with index 3 without animation").
navigationClickTargetSizeNumber8Amount of padding to apply around the label in pixels.
navigationEnabledBooleanfalseFlag to render the navigation component (next/prev buttons).
navigationNextLabelStringText content of the navigation next button.
navigationPrevLabelStringText content of the navigation prev button.
paginationActiveColorString#000000The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationColorString#efefefThe fill color of pagination dots. Any valid CSS color is accepted.
paginationPositionStringbottomThe position of pagination dots. Possible values are bottom, bottom-overlay, top and top-overlay. The overlay values place the pagination component over the images.
paginationEnabledBooleantrueFlag to render pagination component.
paginationPaddingNumber10The padding inside each pagination dot. Pixel values are accepted.
paginationSizeNumber10The size of each pagination dot. Pixel values are accepted.
perPageNumber2Maximum number of slides displayed on each page.
perPageCustomArrayConfigure the number of visible slides with a particular browser width. This will be an array of arrays, ex. [[320, 2], [1199, 4]]. Formatted as [x, y] where x=browser width, and y=number of slides displayed. Ex. [1199, 4] means if (window >= 1199) then show 4 slides per page.
resistanceCoefNumber20Resistance coefficient to dragging on the edge of the carousel. This dictates the effect of the pull as you move towards the boundaries.
scrollPerPageBooleantrueScroll per page, not per item.
spacePaddingNumber0Stage padding option adds left and right padding style (in pixels) onto VueCarousel-inner.
spacePaddingMaxOffsetFactorNumber0Specify by how much should the space padding value be multiplied of, to re-arange the final slide padding.
speedNumber500Slide transition speed. Number of milliseconds accepted.
tagNameStringslideName (tag) of slide component. Overwrite with coponent name when extending slide component.
touchDragBooleantrueFlag to toggle touch dragging.
valueNumberSupport for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount).

Events

EventTypeEmitterDescription
navigation-clickCarouselEmits when the a navigation button is clicked, with the current direction (backward or forward)
pagination-clickCarouselEmits when a pagination button is clicked, with the current pageNumber
page-changeNumberCarouselEmits with the current page number.
slide-clickObjectSlideEmits with the dataset object of the selected element ··
transition-startCarouselEmits when the transition end is reached
transition-endCarouselEmits when the transition start is reached ·

Lowercase versions of the above events are also emitted, namely—pagechange, slideclick, transitionstart and transitionend.

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

  <carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

To listen for the 'slideclick' event you can do the following:

  <carousel>
    <slide
        data-index="0"
        data-name="MySlideName"
        @slideclick="handleSlideClick">
      Slide 1 Content
    </slide>
    ...
  </carousel>
  handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
  }

Development

A sandboxed dev environment is provided by vue-play. Changes made to the component files will appear in real time in the sandbox.

To begin development, run:

yarn install
yarn dev

then navigate to http://localhost:5000

To modify and add sandbox scenarios, edit play/index.js

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文