Crepe Slides for Vue

Features

import CrepeSlides from 'vue-crepe-slides'  <crepe-slides   :slides="slides"   :width="360"   :aspect-ratio="16 / 9" ></crepe-slides>

The array of slide which contains name, nested layers and optional href. See the sample.

Each layer has attributes:

type: The field indicates type of layer. Avaiable type is image, video, text, group.
image: If type is image, the field indicates image url.
poster, video: If type is video, the fields indicate video poster & source urls.
text: If type is text, the field indicates text content of the layer.
children: If type is group, the field indicates an array of nested layers.
styles: The field indicates static style of the layer. It's just CSS.
transition: The field indicates timing function & styles of stages of slide animation.
- timing: Availabe timing functions are defined in ease-component
- styles: Styles of three stages (enter, stay, leave) of slide animation could be specified here. Tween values are computed automatically by the timing function with stage styles. Transform methods have their shorthand writing style. Some values without units of special fields will be appended unit automatically. Value of style could be an expression with predefined dynamic variables. Current available variables are @containerWidth, @containerHeight for all layers and @duration for video only.

The value of width without unit.

The value of ratio of width and height.

Video Layer requires video support on the browser. Three state are defined in import {VideoSupportState} from 'vue-crepe-slides'.

Mouse or touch could be specified if the component is only used on PC or mobile devices. Three state are defined in import {InteractiveType} from 'vue-crepe-slides'.

Index of current active item. (.sync)

# install dependencies npm install  # serve with hot reload at localhost:8080 npm run dev  # build for production with minification npm run build

For detailed explanation on how things work, consult the docs for vue-loader.