Carousel: Append a slide to specific index?

[souravdutt]

Describe the bug

Hey! Fancyapps team, thanks for making such awesome packages. I am facing issue described as under:

Before the first slide change, unselectSlide method is triggered so the carousel.page will be equals to 1 and I am passing that as index of dynamic slide. but when the slide is added the index still remains the last available in the carousel. I have read the docs that appendSlide() adds slide at the end of carousel then why there is index option avialable if it still not going to use the passed index value. I think that needs to be fixed.

I want to know, is there a way, to add a slide to the desired position in carousel?

Reproduction

have a look at the sample code I am using in my script:

unselectSlide: (carousel, element) => {
  let index = carousel.page;
  let pos = carousel.viewportDim * page;

  carousel.appendSlide({
    html: `<div>Dynamic Slide</div>`,
    el: document.createElement('div'),
    isDom: true,
    class: 'dynamic-slide',
    index: index,
    dim: carousel.viewportDim,
    gap: 0,
    pos: pos,
  })

})

Additional context

The important thing is, I want to append as soon as the slide is going to be changed, that's why I am using unselectSlide() and want to show the new dynamic slide as the next slide when the current slide will change.

[fancyapps]

Actually index is not an option but a property, sorry for the confusion, maybe it should have some prefix.

Have you seen this demo? This is an example of how to create an infinite navigation so that the navigation works properly https://fancyapps.com/carousel/virtual-slides/#infinite-slides

[souravdutt]

@fancyapps Thanks for your response! Actually, my problem is, I have already initialized the carousel with some slides (let say 4) and I want when the user tries to go on the second slide, I want to append a new slide dynamically in second place, so the original second will become third and total 5 slides. this is just an example that may seem a little silly but required for the project. If there is a way to add slide at a desired position instead of at the end, it can solve this issue!

I have tried something like this: $(last_slide).insertBefore($(current_slide).next()); It works but not perfectly, The carousel object still keeps the slides at their original spot. I also tried to shift the keys inside the carousel object but no 100% accurate/user-friendly solution.

[fancyapps]

From v5.0.25 there is a new method addSlide() which allows you to add a new slide at the selected position. See this demo - https://jsfiddle.net/nb39vd8m/