prev()/next() with bound: true doesn't work as expected

I have found two issues related to this.

next() still increasing index although there’s no visible change

Say you have 10 elements with a viewport of ~4.

I have next/prev arrows which call to next() and prev() and the item bound to true. At some point, the carousel reaches the end, but the index keeps updating towards the last index so I can click next() several times after the end and when I click to prev() I need to click it enough times so that the panel index gets to a point where it needs to scroll.

I would assume that I can click next as many times as I want and then click prev() and that it would scroll.

Dragging (with mouse/fingers) to the ends, updates to last index

On the same line, if I “drag” the carousel towards the end with the mouse/fingers, once it reaches the end, the index is not set to the last item. Again, clicking prev() does nothing for a few slides until I get to one that requires a shift of viewport.

I haven’t come up with a workaround here. I was hoping to have a method to get the panel index under the hanger, but I haven’t found one.

Workaround

In the process on working through this issue, I found the following workaround to mitigate this in a good way, although probably not on 100% of the possibilities. I’d have expected this to be handled nicely by the library. (Which is great by the way!)

One workaround that seems to be working is this:

var allowNext = true;
flicking.on('moveEnd', function(e) {
  allowNext = e.progress != 1;
  var visiblePanels = this.getVisiblePanels();
  // Move to the second visible item so that prev() works.
  if (visiblePanels[1].state.index < e.index) {
    flicking.moveTo(visiblePanels[1].state.index);
  }
});

$(this).find('.arrows.next').on('click.flicking', function(event) {
  event.preventDefault();
  if (allowNext) {
    flicking.next();
  }
});
$(this).find('.arrows.prev').on('click.flicking', function(event) {
  event.preventDefault();
  flicking.prev();
});

[WoodNeck]

Hello, @hanoii! Really thanks for saying great about Flicking 👍

It is hard to say, but actually that’s expected behavior. That spec was made while we’re creating a new major version of Flicking. Someone really needed that feature on the bound option and we’ve just created it for him. I admit that we were quite thoughtless, and that really behaviors quite weird in common situations.

As that feature cannot be modified for the previous users, I think the feature you want must be created new. I don’t have a specific form in mind, maybe prev()/next() can come with options, or bound option itself can be improved.

Anyway, I really agree with you that behavior must be fixed by any means. Although that might make the index tracking hard, as that will make Flicking to change panel index from 0 to whatever index that makes Flicking to move.

I’ll contact you when I’ve done with that feature 😃

Thanks.

[mohamed67-67]

function Flick() {

  const theFlek = useRef(); 

  useEffect(()=>{
  
              const btn = document.querySelector('.fa-arrow-up')
              btn.addEventListener('click', () => {
                  theFlek.current.index < theFlek.current.panelCount -1 && theFlek.current.next();
              })
  
              const button = document.querySelector('.fa-arrow-down')
               button.addEventListener('click', () =>{
                  theFlek.current.index > 0 && theFlek.current.prev()
              })
          },[Flick])
  
  return (
                <Flicking ref={theFlek} align='prev' bound={true} horizontal={false}  >
                     <div></div>
                </Flicking>
            )

}

export default Flick;