carrousel | cool image carrousel making by original javascript

So I have this very simple carousel of posts I made with Next.js/React and Chakra-UI for a blog, that does not use any external lib or component and it seems to work fine until some where I'm trying to apply some responsiveness using Chakra's useBreakpointValues() to return different formats on each point. I'm trying to keep it simple, so I decided to use only Chakra and React for this.

EDIT: as @ggorlen pointed out, this issue was not properly written. So I made this small reproduction containing just the necessary for the logic of this carouse, hoping it would help to illustrate the problem. There's just the index.js with the carousel and some components all commented. Only next.js and chakra-ui were used.

The content is fed through Sanity API and filtered by categories using context

I am facing a problem, I'm working on a quiz app. Long story short, in the previous release, I used the Tabbedpage but it did not fulfill all my expectations.

So I decided to rewrite my UI with the CarouselView.

At the first question, when the user selects his answer his answer is highlighted (green if it's correct, red if it's wrong).

But here is my problem: when the answer is highlighted at the question 1, for an unknown reason the question 6 is also highlighted at the same position

This is my problem. I'm using the owl.carrousel MIT libraries in my page. This libraries automatly creates a div to give it the class "active" when it has to be shown. I want to set a different background in the carrousel section when any different "owl-item" is active.

This is the html code as i have it on my index.html document:

how are you, well I am triying to make a Carrousel responsive with Javascritp, but I am struggling with the logic here. I've tried everything, with css is imposible, because the images are note background images. I am about to go crazy with this. This is the code

I'm trying to make a background animation where some clouds come from top to bottom constantly. I'd like to have the effect, when the images begins to desapear from the bottom of the viewport, the same image starts appering again above. Like a carrousel, the only difference is that not horizontal but vertical.

I've managed to setup an animation but the problem is, the image desapers completely from viewport before it starts showing up again on top and then going down. In between a have a blank space. I'm doing something wrong but can't figure out what.

Here is my code sofar. Please be patiente with me cause I'm a newbee :) Thank you!

https://codepen.io/Martschioo/pen/eYdqdzE

I'm working on a project where a record needs to be inserted, using a context class. However, before the insertion, one of the properties 'DataArea' is being set to a value that it should not have.

I started debugging the code to see where exactly this value is being set, and I have altered the short written version of the getter and setter (get; set;), to this:

For a local App that will be only available on our own tenant (so no publishing to the MS app store), I want to display an image / image carrousel on the app's "splash screen", just like the image below:

The image markdown seems to be supported, however when I add the image markdown, like so:

I just made a slider with the help of this site: https://la-cascade.io/un-carrousel-responsif-en-pur-css/.

it works very well only it is way too big on my site I would really like to provide the modification but I can not do it someone knows how to do it

My CSS:

I have many problems using this implementation to sync the text and a carrousel images with scrollview in React Native. I try many options to fix this like setTimeout and contentOffset.

The problem is the first render not call the scrollTo and this unsynchronize the text and image showed.

I found this issue in React Native https://github.com/facebook/react-native/issues/6849, but i can't extract a solution in this. Someone can help me?