Skip to content

tucows/donejs-carousel-plugin

Repository files navigation

@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

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

screen shot of carousel at ting.com

screenshot 2

screen shot of carousel at ting.com