https://github.com/travelbank/ember-flickity

ember addon for Flickity
https://github.com/travelbank/ember-flickity

carousel carousel-component ember flickity

Last synced: 2 months ago
JSON representation

ember addon for Flickity

• Host: GitHub
• URL: https://github.com/travelbank/ember-flickity
• Owner: travelbank
• License: mit
• Created: 2016-08-10T03:50:23.000Z (over 8 years ago)
• Default Branch: develop
• Last Pushed: 2019-01-07T18:45:15.000Z (about 6 years ago)
• Last Synced: 2024-08-09T13:27:19.257Z (6 months ago)
• Topics: carousel, carousel-component, ember, flickity
• Language: JavaScript
• Homepage:
• Size: 244 KB
• Stars: 4
• Watchers: 38
• Forks: 6
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember-flickity

[![Build Status](https://travis-ci.org/travelbank/ember-flickity.svg?branch=develop)](https://travis-ci.org/travelbank/ember-flickity)

An Ember addon for [flickity](http://flickity.metafizzy.co/)

## Installation

```

ember install ember-flickity

```

## Usage

```handlebars

{{#em-flickity class="my-slideshow" showSlides=(gt items.length 1)}}

  {{#each items as |item|}}

    


  {{/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][flickityOptions] and [events][flickityEvents] are supported.

[flickityEvents]: http://flickity.metafizzy.co/events.html#flickity-events

[flickityOptions]: http://flickity.metafizzy.co/options.html

```javascript

    actions:{

      mySettle(index, flickityElement) => {

        console.log('settle');

      },

    }

```

```handlebars

{{#em-flickity pageDots=true draggable=true showSlides=(gt numItems 1) settle=(action 'mySettle')}}

{{/em-flickity}}

```

```javascript

  events: computed(() => {

    return {

      ready: (index, flickityElement) => {

        console.log('ready');

        flickityElement.resize();

      },

      change: (index, flickityElement) => {

        console.log('change');

      },

    };

  }),

```

```handlebars

{{#em-flickity pageDots=true draggable=true events=events}}

{{/em-flickity}}

```