selvagsz / ember-carousel Goto Github PK

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

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.

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.

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

Your dummy app put seconds of transition in CSS.

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.

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.

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.

• Publish on npm
• Add tests

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

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.

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

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