A carousel plugin for donejs
npm install @tucows/donejs-carousel-pluginA carousel plugin for DoneJS.
To view the demo page with different carousel options, run the following commands:
```
npm install
donejs develop
Then visit localhost:8080/
`js`
Call the element
`js`
Pass it the required properties
`js
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
slides:from='./userReviews'
carouselOptions:from='./carouselOptions'
>
{{#each(./userReviews)}}
{{/each}}
`
define activeSlideIndex
`Js `
/**
* @property {number} activeSlideIndex passed up from the carousel component
*/
activeSlideIndex: 'number',
define carousel options
`js/src/assets/icons.svg#pointLeft
/**
* @property {object} carouselOptions options to be passed down to carousel component
*/
carouselOptions: {
type: 'any',
value: {
navArrows: {
leftSvgUrl: ,/src/assets/icons.svg#pointRight
rightSvgUrl: ``
},
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
Screen shots from https://ting.com
#### screenshot 1

#### screenshot 2
