wrapAround incompatibility with a 2-slide carousel

[jnicol]

When there are two slides and wrapAround option is true, the fade is mucked up. It looks like the opacity values are being set as a negative number for one slide (0 ... -1) and values above 1 for the other slide (1 ... 2). The result is that the carousel immediately jumps to the next slide rather than fading.

Test case: https://codepen.io/jnicol/pen/daVWQB

If there are 3 or more slides then the issue is not present.

[desandro]

Thanks for reporting this issue. I'll take a look.

[skillmatic-co]

Bumping, have the same issue.

[timkirtley]

Also have same issue

[albell]

Hey @desandro any intel on this? This is sort of a dealbreaker. Super hard to explain this to a client. 😬 If this is just a quick fix to the opacity math I might be up for it.

[laurelstreng]

Also running into the same issue

[laurelstreng]

@albell I also needed this for a client and a quick/dirty fix I found was to leave fade set to true and update my CSS to:

    .carousel-cell {
      opacity: 0 !important;
      transition: opacity 1s ease !important;
      &.is-selected {
        opacity: 1 !important;
      }
    }

[discoliam]

Just to confirm @laurelstreng fix worked for us perfectly. Thanks :)

[ste6412]

I also had a similar issue, though not with fading. I have four cells in view which flickered when sliding. using the fix above by @laurelstreng and setting initial opacity to 1.

Thanks for the fix :)

[wolffe]

Same here. Any updates planned? I know that Metafizzy is now lower priority, but is there any roadmap?

[CHEWX]

+1 on a fix here.

[yllip]

Same problem in our end too.

[wgeorgecrisan]

Thank you +1

[clarknelson]

+1 :)

[alexbogias]

Thanks for the fix! +1 for a better one @desandro :smile:

[joshuapease]

I think I have a potential fix for this issue. It might not be the root cause, but it works great for me.

https://github.com/metafizzy/flickity-fade/pull/11

[alexb148]

I am also having this issue. Any fixes coming?

It is a particular problem in a CMS driven site, where the client sometimes only uploads 2 images to a gallery component.

[sunnyt7]

This still isn't fixed :(

[acflint]

+1 for this issue! Still a problem, though @laurelstreng's solution worked for now.

[alex-figge-schuster]

facing the same problem. +1 for a fix @desandro

[frazerf]

Thanks @laurelstreng - your fix worked a treat!

[ziyadElon]

Why was this closed? Still having this issue.

[marcmedhat6211]

I am also having the same problem and i don't know how to explain this issue for the client so i decided to start using the swiper plugin, it covers this issue and many other issues. https://swiperjs.com/swiper-api

[dpw1]

@laurelstreng Thank you so much! You saved me.

[dpw1]

I am also having the same problem and i don't know how to explain this issue for the client so i decided to start using the swiper plugin, it covers this issue and many other issues. https://swiperjs.com/swiper-api

Just as a heads up:

Be careful if you are sticking with Swiper and using lots of images.

I am currently migrating a huge e-com from Swiper to Flickity because it was not able to scale - having more than 15 images on the same slider was freezing the page.

Between all the most popular alternatives (Flickity, Slick, Swiper, Owl Carousel), Flickity was the only one able to properly handle things. (in my experience, of course).

[thegirlinthecafe]

@laurelstreng you made my day! Your solution fixed it for me too! :)

[tlhfckoctbcr]

Cheers, thanks for the fix.

[robinsm]

@laurelstreng works perfectly, thank you.

[andyknapp]

@laurelstreng thanks for the fix! You saved me a headache

[gavin310]

Thanks for the fix @laurelstreng !

[laurelstreng]

I love that this is still helping people 3+ years later 😄