travelbank / ember-flickity

ember addon for Flickity
MIT License
4 stars 6 forks source link
carousel carousel-component ember flickity

Ember-flickity

Build Status

An Ember addon for flickity

Installation

ember install ember-flickity

Usage

{{#em-flickity class="my-slideshow" showSlides=(gt items.length 1)}}
  {{#each items as |item|}}
    <div class="my-slideshow__item"></div>
  {{/each}}
{{/em-flickity}}

showSlides is a Boolean. This allows you to enable or disable flickity based on the number of items you have in the list.

Flickity options and events

All options and events are supported.

    actions:{
      mySettle(index, flickityElement) => {
        console.log('settle');
      },
    }
{{#em-flickity pageDots=true draggable=true showSlides=(gt numItems 1) settle=(action 'mySettle')}}

{{/em-flickity}}
  events: computed(() => {
    return {
      ready: (index, flickityElement) => {
        console.log('ready');
        flickityElement.resize();
      },
      change: (index, flickityElement) => {
        console.log('change');
      },
    };
  }),
{{#em-flickity pageDots=true draggable=true events=events}}

{{/em-flickity}}