react-carousel | A carousel written in react | Carousel library

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

Why I got Minified React Error #321 during the next build compilation? Did I mess up with useEffect() ?

Part of the error throwed :

Following on from: How to make my react-multi-carousel use a light-box feature for my ReactJS app

My app is using react-images for lightbox and react-carousel-images for the carousel. My api has a title and image. Problem I have is the title in the footer caption is always coming as the image selected and not changing when in the lightbox carousel. I think it is to do with the index of the selected image? My code so far is:

example of issue: https://codesandbox.io/s/react-multi-corousal-issue-72s9o?file=/src/Slider.js

slider.js