Looped Carousel not properly cloning out of view slides

[gavin310]

Describe the bug

When there's a looped Carousel and you're on the last slide, the first slide doesn't appear until you start dragging the carousel.

Reproduction

https://stackblitz.com/edit/js-cqziwujl?file=index.js

Go to slide 4 and you can see that slide 1 doesn't show. If you start dragging the carousel it will show up.

Additional context

No response

[fancyapps]

Hi,

First, actually, the carousel is not cloning the slides, but only repositioning them on the track.

Then you have removed overflow:hidden for the viewport element, so you have made all the slides visible in the scrollable element, but the script is not designed for that.

Anyway, your CSS could be simplified to this:

.f-carousel {
  --f-carousel-spacing: 10px;
  --f-carousel-slide-width: calc(80% - 20px);
}

.f-carousel__slide {
  padding: 50px;
  background-color: beige;
  text-align: center;
}

https://jsbin.com/yojilofajo/edit?html,output

[gavin310]

We frequently need the sliders to break out of our layout grid, which is why we have the overflow: unset. If that's the culprit we'll see how we can get around that. Thanks for the quick reply!

[fancyapps]

Closing this because the demo in the first comment no longer works and it's hard to understand what the problem is. If the goal was to show slides outside the viewport, then it can be archived using the latest version - https://jsbin.com/felupeneja/edit?html,output