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.

Open
#1,314 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

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.