Auto select cell in the centre

[Julix91]

Hi everyone,

I struggled to make a Flickity slider have a draggable nav that while selects the parent slide dynamically while dragging.

Eventually I got it: https://codepen.io/Julix/pen/ywxoQq - but it still gets stuck at the edge of the slider (between 12 and 1). I'd like some help with that.

Note I also want closest neighbors of the selected to have classes added, and got that to work. https://codepen.io/Julix/pen/GLKOVa

Thank y'all, Julian

---

Acknowledgement A pen that highlights closest cell was a great starting point for me - I found it in 880 issue discussion. I went with asNavFor, though I did look at sync as well.

[Julix91]

Lol, just saw that I already had noticed before (and forgotten) that the code my code is based on doesn't handle wrapAround!

[acemir]

Hi @Julix91,

To accomplish this feature we need to adjust the way we identify the closestSlideIndex. I updated your pen with the adjusts: https://codepen.io/acemir/pen/MRgNwJ Hope it helps!

[Julix91]

That code works, cheers!

I noticed you wrapped the navCompanion.select in a navDragging conditional check. Since the function is only called on scroll is that necessary?

Reason I ask is it makes reusability of the function harder, since I'd have to add the event handler for each nav slider...

var navDragging = false;
$nav.on('dragStart.flickity', function () {
    navDragging = true;
});
$nav.on('settle.flickity', function () {
    navDragging = false;
});

---

Unrelated: Infinite scrolling https://youtu.be/RQQwsAq5BQU

Haven't tried reducing the test case for the above issue yet, to see if that's just wrapAround in general, but hadn't encountered it before. - Somehow it doesn't seem to lose momentum :D - Gotta flick pretty hard to get that though...

[acemir]

The scroll event fires whenever the slider moves. I did this check in the drag only to avoid firing the select event again when thescroll came from a click instead of the drag. For example: When slide 1 is selected and a click occurs on slide 4, if you comment lines 23 to 25, 53 and 58, you will see that the scroll is triggered and a select occurs already on the next slide, slide 2. With this check, slide 4 is selected correctly. About the video, unfortunately I could not reproduce this strange behavior.

[Julix91]

Found steps to reproduce:

1. open the code pen, make the window size smaller than your screen size
2. start drag on the nav and pull really hard and fast, somewhat off the window 2 b repeat step 2 a bunch of times until it happens
3. observe crazy scrolling
4. try pausing it by holding or swiping main (won't work)
5. stop scrolling by scrolling on the nav

Very strange bug. - Figured it was rare enough I could ignore it, but designer ran into it. - I can only unreliably reproduce it myself! :(

Sadly it's easier to reproduce on mobile... I got the S8+ with the curved edge and one hard swipe and I get it...

Update:

Actually it was only right at first that it's easy to reproduce, then I noticed why: it's when dragging between the first and the last item! -- edit 1: still hard / inconsistent to reproduce

Edit 2: just got 3 in a row - so apparently it's practicable :D

sadly "it's an easter egg - feature not a bug" isn't going to be a good enough...

Edit 3: just tried some more on full screen - is still doable - also doable when starting from places other than the first and last.

It might be whenever you wrap around in one swype such that it navigates to itself?

Is "itself once around" the same as itself? Not sure how the wrapAround is implemented...

[Julix91]

Still can't figure out what's causing this but I'm running into it often.

[desandro]

Thanks for reporting this issue.

You'll likely have to look into the geometry code about selecting the cell in the center WITH wrapAround. That makes things difficult. Flickity is not exactly wired-up for this kind of interaction WITH wrapAround. As this is an implementation issue, I feel it falls outside of Flickity's principle feature set so I'll have to pass on investigating.

[Julix91]

Found a solution: increasing friction and attraction to 1 prevents the issue... though changes the feel a lot too.

"friction": 1,
"selectedAttraction": 1,

[Julix91]

Nevermind - that didn't do it, but changing to this did the job:

this.select(this.scrollSlideIndex, isWrapped, isInstant);

with both options set to true.

Here's the updated pen: https://codepen.io/Julix/pen/xexawP