selvagsz / ember-carousel

An ember addon for carousel component

ember-carousel

An ember addon for Carousel component

DEMO

Usage

From within your Ember CLI application, run the following:

ember install ember-carousel

Add invoke the component as follows

{{#carousel-container transitionInterval=400 as |ui controls|}}
  <div class="carousel-body">
    {{#ui.item}}
      Emberjs
    {{/ui.item}}
    {{#ui.item}}
      Reactjs
    {{/ui.item}}
    {{#ui.item}}
      Angularjs
    {{/ui.item}}
  </div>

  <button onclick={{controls.previous}}>
    Slide Left
  </button>
  <button onclick={{controls.next}}>
    Slide Right
  </button>
{{/carousel-container}}

API

{{carousel-container}}

This is the primary component to start displaying carousel items.

Attributes

• transitionInterval - Defaults to 500.
• onSlide - Optional, an action that receives one parameter, an object like { index: 3, previousIndex: 2, direction: 'right' }.
  Triggered before the transition is completed.

Yielded Params

This component yields two hashes, e.g. {{#carousel-container as |ui act|}}. These parameters ui and act can be called anything, but they contain the following items:

• ui - is a hash with the following component items:
  • item - A component that should contain your slide contents, used like so {{ui.item}}you content{{/ui.item}}.
• controls - is a hash with the following action items:
  • previous - A closure action that changes to the previous slide.
  • next - A closure action that changes to the next slide.

Development

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

ember-carousel's Issues

load additional ui.item dynamically

Hey there,

Does this addon support loading additional objects to the carousel dynamically? For my use case, I would like to add an item to the carousel as they are appended to a list. Currently I am seeing the below error if the carousel is rendered and an item is appended to the list for it to display:

"Assertion Failed: Cannot update watchers for isActive on <app@component:carousel-item::ember3062> after it has been destroyed."

Cheers

Feature Request: auto-play

carousel-container transition-interval=100 not working. I set the transition-interval to 100, so expecting to change the image in 100 milli sec. But images are not changing till manually click on right and left button.

Phase I

• Publish on npm
• Add tests

Bug: multiple slides showing at once

So if you click right and then left (or vice-versa) really quick, the old slide stays on the screen and now you have two slides. This can be reproduces in the demo app.

transitionInterval don't working

This flag in component don't working... transitionInterval

Your dummy app put seconds of transition in CSS.

The installation process is corrupted in some way.

I tried to install with ember install ember-carousel, the installation works fine, but in the
/node_modules/ember-carousel/addon/templates/components/carousel-container.hbs. There is only single line of{{yeild}} in the file. Obviously the component does not work.

Example on `npmjs.org` is out of date

I'm not sure if this is an issue with npmjs.org or some config problem with this project, but figured you'd want to know that the example on npmjs.org is from an older version of the README. It shows

{{#carousel-container transitionInterval=400}}
  {{#carousel-body}}
    {{#carousel-item}}
      Emberjs
    {{/carousel-item}}
    {{#carousel-item}}
      Reactjs
    {{/carousel-item}}
    {{#carousel-item}}
      Angularjs
    {{/carousel-item}}
  {{/carousel-body}}
 
  {{#carousel-arrow direction="left" tagName="button"}}
    Slide Left
  {{/carousel-arrow}}
  {{#carousel-arrow direction="right" tagName="button"}}
    Slide Right
  {{/carousel-arrow}}
{{/carousel-container}}

instead of the contextual syntax.

Component Enhancements

• Indicators
• Autoplay
• More configurations like "Pause on hover", "transitions"

Publish master to npm

Master has some features and dep fixes that fix ember-cli deprecations.

Bug: Not Compatible with 2.10 (Glimmer 2) & Emberfire

Trying to use this with 2.10 (Which includes Glimmer 2) and I get this error message:

Assertion Failed: You modified isActive twice on <...carousel-item> in a single render. This was unreliable and slow in Ember 1.x and is no longer supported. See emberjs/ember.js#13948 for more details.

It looks like this relied on a deprecated pattern of setting values while the component was still rendering and now, with Glimmer 2 in 2.10, that deprecated pattern has been wholly prevented which prevents ember-carousel from working.

Bug: A helper named 'carousel-container' could not be found

If you put anything other than an <img> into the {{carousel-item}} block, you get the A helper named 'carousel-container' could not be found error.

{{#carousel-item}}
  <div></div>
{{/carousel-item}}

More complicated example:

{{#if data.length}}
  {{#carousel-container transition-interval=400}}
    {{#carousel-body}}
      {{#each data as |datum|}}
        {{#carousel-item}}
          {{#each datum as |item idx|}}
            {{#with (get-field group.fields idx) as |field|}}
              {{#if (eq field.displayType 'image')}}
                <img src="{{item}}" class="carousel-image img-responsive" alt="{{field.property}}"/>
              {{else}}
                {{#if (eq field.displayType 'url')}}
                  <a href="{{item}}" target="_blank" title="{{field.property}}">Link</a>
                {{else}}
                  {{item}}
                {{/if}}
              {{/if}}
            {{/with}}
          {{/each}}
        {{/carousel-item}}
      {{/each}}
    {{/carousel-body}}

    <div class="row">
      <div class="col-xs-6">
        {{#carousel-arrow direction="left" tagName="button" class="btn btn-link btn-block"}}
          Previous
        {{/carousel-arrow}}
      </div>
      <div class="col-xs-6">
        {{#carousel-arrow direction="right" tagName="button" class="btn btn-link btn-block"}}
          Next
        {{/carousel-arrow}}
      </div>
    </div>
  {{/carousel-container}}
{{/if}}

In this example, the <a> throws the error.

Feature Request: don't wrap option

Basically an option that stops the slide, and disables the next/previous button if you have reached the last item in the carousel.