metafizzy / metafizzy/flickity
WrapAround is not working as expected, When on first slide the last adjacent slide flickers and similarly happens on the last slide.
- Dominant language
- JavaScript
- Stars
- 7.6k
- Forks
- 593
- PR merge metrics
- No merged PRs in 30d
Description
The wrapAround property in Flickity is not functioning as expected. When enabled, the carousel should seamlessly loop back to the beginning when reaching the end of the slides. However, in my implementation, the slides do not wrap around correctly, and the carousel stops at the last slide.
**Steps to Reproduce**
1. Initialize a Flickity carousel with the **wrapAround** option set to `true`.
2. Add multiple slides to the carousel.
3. Attempt to navigate through the slides to observe the wrap-around behavior.
**Expected Behavior**
The carousel should loop back to the first slide after reaching the last slide, creating a seamless wrap-around effect.
**Actual Behavior**
When on first slide the last adjacent slide flickers and similarly when on last slide the adjacent first slides flickers.
```
const carouselElement = el.querySelector(`.${CAROUSEL_CLASS_NAME}`);
const flickity = new Flickity(carouselElement, {
wrapAround: true,
imagesLoaded: true,
accessibility: true,
adaptiveHeight: true,
autoPlay: Number(el.dataset.speed) || false,
pageDots: el.dataset.slideDots === 'true',
prevNextButtons: el.dataset.prevNextButtons === 'true',
lazyLoad: true,
});
```
- Flickity version: ^2.3.0
Using this with apostrophe, version 4.8.1.
Please let me know if you need any further information or if there are any workarounds for this issue.
Contributor guide
Research direction
Reproduce the issue using the supplied Flickity initialization with wrapAround enabled and multiple slides, checking navigation at both ends. No file or test is named in the report, so first locate the wrapAround implementation and its existing tests. Done means the first and last adjacent slides no longer flicker and navigation loops seamlessly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100