react-carousel | Lightweight carousel component for react | Carousel library

I have created a product carousel with react, it has 10 products, but I only want a max of 4 products to display at any one time, I tried reducing the width but that didn't work. Also had a look at the documentation for the carousel but couldn't find a solution for this https://www.npmjs.com/package/pure-react-carousel#component-properties-props

This is the git repo for the carousel https://github.com/RMP1992/react-product-carousel

react Carousel component

I'm using Gatsby in one of my projects, and due to its configs, in the server side, Node doesn't have the window loader. All that being said I found the guides in Gatsby docs for a previous package on how to avoid having these errors:

I'm working react.js image gallery project with this as starter. There is a Settings field to customize the gallery performance. I am showing this setting on the right side of the screen when in Full screen mode as like as below image.

.

By the way, the 2 input elements don't work as if they were disabled. (mouse clicking, typing any keyboards), I can't do anything with these inputs.

I know that Using the Fullscreen API in web browsers, for security reasons, most keyboard inputs have been blocked in the Full screen mode. To fix this problem I tried use Element.ALLOW_KEYBOARD_INPUT in my code.

I'm trying to use this react-carousel-3d library https://github.com/suhailsulu/react-carousel-3d but I'm getting the below error as the library is not developed to support SSR.

I use Gatsby and NetlifyCMS for my website and currently get the following error message at running Workflow in GitHub Actions:

Bug description I am working with a library called react-carousel from brainhubeu in NextJS. Even when I am using dynamic import with ssr:false, The build UI looks strange but the dev UI is perfectly fine.

dev UI -

I have recreated it in Codesandbox too (this one is for dev environment is running npm run dev)- https://codesandbox.io/embed/suspicious-volhard-460q8?fontsize=14&hidenavigation=1&theme=dark

However when I build it and then run the build by using npm run build && npm run start -

To recreate this in codesandbox -

1. In bottom right click on + sign for a new terminal
2. npm run build
3. npm run start (I have already added "start": "next start -p 8080" in the package.json file so a new tab will be created for the sandbox and can be accessed as https://460q8-8080.sse.codesandbox.io/ where 8080 signifies the port number )

Expected behavior UI should be same as when seen with npm run dev.

Question

1. Why does my dev UI works fine but when I build and serve, the UI is strange. What exactly is the difference between npm run dev and npm run build && npm run start in context of NextJS?

2. Any solution to this problem?

My attempts

1. I have been trying to work on this problem and have asked this question on official Github discussions on NextJS. Couldnt find any answer.

2. I even created a Github Bug issue on react-carousel's Github, they couldn't help much.

Thanks for helping out.

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.

I need to build a carousel with following the design structure:

I have tried multiple libraries: react-slick, owl-slider, brainhubeu's react-carousel & tiny-slider. All of them seem to be designed for fixed width cards/sliders. Once I change dimension for my current active slider, its position gets lost.

Have you seen something similar anywhere? Any examples or ideas are welcomed (preferably React.js solutions).

While learning and deploying MERN application, I was able to successfully host my MERN app on heroku.

However, when logging into my app, api/login works great. However, the subsequent call api/getUserData is throwing a 404 error.

Any help is greatly appreciated... Thanks in advance.

my client Package.json