Carousel slides onto the first image

[AlexB52]

I know the carousels are still experimental but I thought I would raise those issues as I find them when trying to use carousels.

When setting up a carousel you get the first image sliding. I would expect to show the first image without the slide. Here is a gif of what I am describing. I have captured the gif while refreshing several times the page.

[picturepan2]

@AlexB52 You mean showing the first image without sliding from the 4th one?

[AlexB52]

@picturepan2 yes exactly.

When the carousel is on the top of a page every refresh will show that transition which seems weird (humble opinion). I tried to find a quick fix on this one and but because the carousel is css only, it is quite tricky.

I like the goal of making it css only btw 👏I am a bit concerned of the usability though without some js specially with #430

I am going to use a dedicated carousel plugin as I can't use this one.

Side note: Spectre is pretty amazing. Thanks for that framework.

[NicoHood]

I ran into the same issue. @picturepan2 you are the master of CSS, do you know any good way to fix this?

@AlexB52 What alternative library did you use?

[NicoHood]

Update: I managed to simply work around this issue by changing the slide animation to a transition:

transition: opacity 0.6s ease-out;

You have to replace the two animations in _carousels.scss with this transition. This idea was borrowed from here: https://codepen.io/SitePoint/pen/MyPVdK?editors=1100

I wish there would be a better solution, or at least an integrated fix by upstream/

[AlexB52]

@NicoHood using a transition is an elegant workaround well done :+1:

I think I probably ended up using the slick library. I got hooked by the promise

Slick - the last carousel you'll ever need 😂

[NicoHood]

Looks REALLY nice. But it uses javascript, right?

[Vectrex]

Pure JS. It requires jQuery BTW.

[NicoHood]

Well, I would prefer a CSS only solution. Want to keep my site clean and fast.