react-slick | React carousel component | Carousel library

You have to install the types for 'react-slick' @types/react-slick . Make sure its on your package.json as well as r@types/react 16.8.2

@types/react-dom

You need to edit dist folder from the library if you want it to work. Changes will not apply if you edit from the source and not from the output bundles.

However, if you want to edit slick styles just overwrite them in your app css, dont edit stuff in node_modules, thats highly not recommended.(you may need to throw some !important though)

I got it working with JavaScript, although it's not an elegant solution. The following will add position:relative and z-index:50 to the element with CSS class slick-current, and will remove it from the other active slides (since the slick current class changes slides when another slides becomes the current slide) using useEffect:

Your problem stems from how you're trying to do your logic against state variables. There's no connection between your state and your ShowTitle component, other than referring to them. Whenever you page through the carousel, you're changing both state variables so they will always be the same.

Unfortunately, the library you've chosen for your carousel forces you to rely on an index, so I would suggest you use the index argument on the map function to assign indexes to your ShowTitle components. Note: React will warn you if you try to use indexes for keys, as that has the potential for strange behavior. Keep using the id for that.

Just removed the tilde prefix

I have Checked on Code sandbox and inspect the arrow ,you can change only background Color or else you need to import arrow icon from Material UI or Bootstrap

What you can do here is, define a render a common modal outside this Slider but in the same component.

You can display the image in the Modal using the URL of the image from the current slider index.

It's difficult to guess what's going on, as you pointed it seems related to cache issues, however, you've tried all the cache-related stuff. I'd suggest:

• Remove gatsby-plugin-offline and add gatsby-plugin-remove-serviceworker since you won't be using service-workers anymore

• Check the importation path. It should be:

I ran into this problem today when updating all our dependencies. We configure webpack ourselves and aren't running a vanilla Create-React-App setup so our environments are different to yours.

For what it's worth... I installed the dependency and tried turning it off an on again, seemed to do the trick.

1. Explicitly declare the @babel/runtime in package.json file