@tucows/donejs-carousel-plugin

A carousel plugin for DoneJS.

Demo

!Autplay Carousel Demo

To view the demo page with different carousel options, run the following commands:

``
npm install
donejs develop
`

Then visit localhost:8080/

Usage

$3

`js

`

$3

Call the element

`js

`

Pass it the required properties

`js
activeSlideIndex:bind='./activeSlideIndex'
slides:from='./userReviews'
carouselOptions:from='./carouselOptions'
>


`

Include the slide content.

Make sure to do the following:

* Loop through same property that you passed into component as 'slides'; in the example below, this is userReviews
* Include this in the class of the parent element
* `class="slide slide{{scope.index}} {{#is ../activeSlideIndex scope.index}} active {{/is}}" tabindex="{{#is ../activeSlideIndex scope.index}} 0 {{else}} -1 {{/is}}"`
* And any other class you want; in the example below, block and icon are optional classes for styling

`js
activeSlideIndex:to='./activeSlideIndex'
slides:from='./userReviews'
carouselOptions:from='./carouselOptions'
>
{{#each(./userReviews)}}



`

$3

define activeSlideIndex

`Js
/**
* @property {number} activeSlideIndex passed up from the carousel component
*/
activeSlideIndex: 'number',
`

define carousel options

`js
/**
* @property {object} carouselOptions options to be passed down to carousel component
*/
carouselOptions: {
type: 'any',
value: {
navArrows: {
leftSvgUrl: /src/assets/icons.svg#pointLeft,
rightSvgUrl: /src/assets/icons.svg#pointRight
},
extraClass: 'userReviewsCarousel',
breakOnDesktop: true,
autoPlay: 6000
}
},
``

### Carousel options

Option | Type | Default | Description
------ | ---- | ------- | -----------
navArrows | object | empty | include leftSvgUrl and rightSvgUrl properties pointing to id in an svg sprite
extraClasses | string | none | class name to be added to parent carousel element for styling
breakOnDesktop | boolean | false | turn off the carousel on desktop view (1024px width and greater). All slides will shown side-by-side.
autoPlay | number | off | enable auto-play sliding. the number represents interval in millisecond.
transition | string | none | if set to 'dissolve', carousel fades between slides instead of sliding

Carousel in action

Screen shots from https://ting.com

#### screenshot 1

#### screenshot 2