Possible bug in example app.

[exoer]

Describe the bug The example in examples/app/SimpleCarousel starts on the 2nd image not the first.

Steps or Sandbox to reproduce coped the sample code to my next.js app.

Expected behavior Expected the first image to come first

Device/Browser Chrome

Additional context

BTW. It would be nice with an example that didn't use styled components

[hartzis]

😳 you're absolutely right, the second image is the initial one in view. I've never noticed before.

It looks to be an issue with flex box and the order css attribute and how we determine what is "next/previous" image.

The carousel is something I mimicked a long time ago from here.

I'd love a PR that fixes this if you want.

BTW. It would be nice with an example that didn't use styled components

What would you like to see used? Could include in the above PR 😸

[rubenmarcus]

I was trying to solve this with this code, but with no luck, on the next it always render a blank space before, why it is working on prev and not on next IDK

transform: ${(props) => {
    if (!props.sliding) return 'translateX(calc(0%))';
    if (props.dir === PREV) return 'translateX(calc(-100%))';
    if (props.dir === NEXT) return 'translateX(calc(100%))';
    return 'translateX(calc(0%))';
}};

[rubenmarcus]

what resolved for me the sequence was to change my carousel slider array something to this :

const carouselData = [{ ...data[data.length - 1] }, ...data, { ...data[0] }, { ...data[1] }];

as also the style:

transition: ${(props) => (props.sliding ? 'none' : 'transform 1s ease')};
    transform: ${(props) => {
        if (!props.sliding) return 'translateX(calc(-100%))';
        if (props.dir === PREV) return 'translateX(calc( 2 * (-100%)))';
        return 'translateX(0%)';
    }};

[hartzis]

Thank you for the feedback. I was able to make the ordering correct by simply adjusting the initial state. #278

https://github.com/FormidableLabs/react-swipeable/blob/d35f2dfaea4f7669dcbc9f9b364563748a5a8268/examples/app/SimpleCarousel/Carousel.tsx#L29

[Alekzv9]

Have you notice that if you only have two items, and go PREV, it will show a BLANK slide?