@tucows/donejs-carousel-plugin

A carousel plugin for DoneJS.

Usage

Import in stache

<can-import from="@tucows/tucows-carousel-plugin" />

Insert component in stache

Call the element

<tucows-donejs-carousel></tucows-donejs-carousel>

Pass it the required properties

<tucows-donejs-carousel
    activeSlideIndex:to='./activeSlideIndex'
    slides:from='./userReviews'
    carouselOptions:from='./carouselOptions'
>

</tucows-donejs-carousel>

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
  • jsclass="slide {{#is ../activeSlideIndexAltTest %index}} active {{/is}}" tabindex="{{#is ../activeSlideIndexAltTest %index}} 0 {{else}} -1 {{/is}}">
  • And any other class you want; in the example below, block and icon are optional classes for styling

<tucows-donejs-carousel
    activeSlideIndex:to='./activeSlideIndex'
    slides:from='./userReviews'
    carouselOptions:from='./carouselOptions'
>
    {{#each ./userReviews}}
        <div class="block icon slide {{#is ../activeSlideIndexAltTest %index}} active {{/is}}" tabindex="{{#is ../activeSlideIndexAltTest %index}} 0 {{else}} -1 {{/is}}">
        <div class="pointIcon">
            <ting-svg hash="{{./icon}}" title="" dimensions="66" />
        </div>
        <h2>{{ l10n ./title}}</h2>
        <p class="tagline">{{ l10n ./body}}</p>
        </div>
    {{/each}}

</tucows-donejs-carousel>

Define the JS properties

define activeSlideIndex

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

define carousel options

    /**
	 * @property {object} carouselOptions options to be passed down to carousel component
	 */
	carouselOptions: {
		type: 'any',
		value: {
			navArrows: false,
			extraClass: 'userReviewsCarousel',
            breakOnDesktop: true,
            autoPlay: 6000
		}
	},

Carousel options

Option | Type | Default | Description ------ | ---- | ------- | ----------- navArrows | boolean | false | display clickable arrows for slide navigation 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.