Carousel not responding to options. about react-responsive-carousel HOT 10 CLOSED

Have you guys used this on server side rendering project? styles applied on it is differently on server and client. Due to that checksum is not matching.

from react-responsive-carousel.

Hi @SolutiaMR, I have all the options working at http://react-responsive-carousel.js.org/storybook/

Did you load the css? Do you see any errors in the browser console? Something else might be wrong or breaking the carousel.

from react-responsive-carousel.

@pankaj417 I haven't used with SSR but a few other users have. AFAIK it's working fine. If you provide me more details I might be able to help. Cheers

from react-responsive-carousel.

@leandrowd : I am getting this. Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) -transform:translate3d(0%,0,0);-moz-tran
(server) -transform:translate(0%,0);-moz-transfor

from react-responsive-carousel.

@leandrowd Thank you for your speedy response. I might be loading the css incorrectly. I see a lot of scss files in the repository. Are there any vanilla css files I can use? Or which scss file do I need?

from react-responsive-carousel.

Hi @SolutiaMR, you can find the css at lib/styles, there is a carousel.css or carousel.min.css. If your css loader allows to load css directly from node_modules, you will be able to load from react-responsive-carousel/lib/styles/carousel.css, otherwise you will need to copy the css to your filesystem and import as if it was from your project.

from react-responsive-carousel.

@pankaj-onerent, I know why it's happening! There is a check to whether the env you are running supports translate3d or not, and node clearly doesn't. This is just a warning and you can still use the carousel without issues. I can solve it later, but no ETA for now...

from react-responsive-carousel.

@leandrowd : yes it is working but due to mismatch in html on server and client. loosing the benefits of Server side rendering.

from react-responsive-carousel.

@pankaj417, I've removed the check that was causing your problem. If you get the latest version you won't get that warning anymore.

@SolutiaMR, I'm closing this issue as your issue was caused by the missing css. Feel free to re-open if the problem persists after loading the css.

from react-responsive-carousel.

@leandrowd : thank you so much for the help. I will check it and confirm.

from react-responsive-carousel.