Destroy or 'push' function

[stokesbga]

I am having the same issue here:
#32

I want a dynamic flipster instance, and it would be nice to have 'add/remove' functions that allow me to populate flipster as needed. The 'destroy' function was never merged.

[shshaw]

In the public methods is an index function that will allow Flipster to update after you add or remove items like in this simple index demo

var flipContainer = $('.flipster'),
    flipItemContainer = flipContainer.find('.flip-items');

flipContainer.flipster({
  itemContainer: flipItemContainer,
  itemSelector: 'li',
  loop: true,
  style: 'carousel',
  spacing: -0.5,
  scrollwheel: false,
  //nav: 'after',
  buttons: false
});

flipItemContainer.children().eq(3).remove(); // Remove the fourth item (zero based index)
flipItemContainer.append("<li style='background: red; padding: 4em 1em;'>Hi! I'm a new Item!</li>"); // Add another item at the end.

flipContainer.flipster('index'); // Reindex items

Are you expecting some other functionality with add/remove? Would you need the destroy function regardless?

[stokesbga]

SMALL thing - when I call index after adding an element and navigate to it for the FIRST time - whether it be clicking, arrows, or flipster('jump', n), there is no transition animation. Is there any workaround for this that you know of ?

[shshaw]

Hm... I suspect a class is missing for some reason on the new item when index is run. How many items are you dealing with and where is the item you're adding? (Beginning, end, etc)

[stokesbga]

I want one function to create elements called addFlipsterItem, which will append a list item to the ul. Initially, addFlipsterItem will be called n times to load default elements. From then, the user has the option to call addFlipsterItem manually. I am having the issue if i initialize flipster with no list elements, or if i have 1 initial element or 10.

[stokesbga]

I fixed the animation jitter with:

function noTransition() {
                self.css('transition', 'none');
                //_container.css('transition', 'none');   // --> I commented this out and the spacing/ animation were back to normal. weird. 
                _items.css('transition', 'none');
            }

[shshaw]

Odd... The noTransition function shouldn't be called when index is run, though it is called during a resize event. I'm not sure exactly why that would have any effect. Something to dig into further.

As for an addFlipsterItem, I don't know that it would be all that useful compared to fixing the index bugs so that users can add or remove items from wherever in the flow.

Could you create a demo of how exactly you're adding items dynamically so I can better understand the use case for all of this?

[shshaw]

Very strange. Updated my Codepen demo to remove one item instead of adding, and it's working as expected. I'd love to see a demo of the behavior you're seeing.

[jagrutkosti]

I am facing the same problem as @stokesbga

[shshaw]

@jagrutkosti With the animation jitter or just adding items to a flipster instance?

[jagrutkosti]

With the animation jitter. Items are added successfully. I tried the solution mentioned by stokesbga but still it did not work for me.

[LoganLehman]

I am still running into this, has this been addressed yet @stokesbga @shshaw @drien?

[shshaw]

This issue has varied quite a bit from the initial request. Please provide a demo (You can fork this Codepen) of the behavior you're experiencing so it can be properly debugged and create a new issue.

I know there's probably quite a bit off in the library about the indexing when trying to add / remove items, but removing items should work correctly.