metafizzy / metafizzy/flickity

Carousel snaps into place after calling resize while freescrolling

Open Beginner friendly
#1,002 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

This is a tough one to recreate in CodePen as it relies on a specific condition. In our case, we are lazy loading images in a freeScroll horizontal (fairly standard) carousel, each of which may be a different height, and thus we are calling resize every time an image loads in the carousel to adjust for potential new heights.

In short, in the flickity.resize method, selectCell is being called with an indiscriminate `true` for `isInstant` as the third parameter, which causes the carousel to instantly snap into place potentially while the user is freescrolling. I was able to fix this by replacing this line in flickity.prototype.resize:

```
this.selectCell( selectedElement, false, true );
```

with this line

```
this.selectCell( selectedElement, false, !this.options.freeScroll );
```

This works nicely with freeScroll turned on or off.

Contributor guide

Open the contributing guide

Research direction

Start in the flickity.prototype.resize method and inspect the selectCell call shown in the issue. Check how resize behaves while freeScroll is enabled and when it is disabled. Done means resizing during free scrolling no longer snaps the carousel into place, while normal resizing still behaves as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.