@tucows/donejs-carousel-plugin

A carousel plugin for DoneJS.

Demo

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

npm install
donejs develop

Then visit localhost:8080/

Usage

Import in stache

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

Insert component in stache

Call the element

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

Pass it the required properties

<tucows-donejs-carousel
    activeSlideIndex:bind='./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
  • 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

<tucows-donejs-carousel
    activeSlideIndex:to='./activeSlideIndex'
    slides:from='./userReviews'
    carouselOptions:from='./carouselOptions'
>
    {{#each(./userReviews)}}
        <div class="block icon slide slide{{scope.index}} {{#is ../activeSlideIndexAltTest scope.index}} active {{/is}}" tabindex="{{#is ../activeSlideIndexAltTest scope.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 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: {
                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