Change classname based on slider index position

Question

I want to change the className based on the selected slider data-index position in https://stackblitz.com/edit/react-slick-slider-issues which is making use of React-slick-slider .

Suppose if the user hovers on the first image, the image data-index value is 0 and I want to push the image above the slider and onMouseOut the image will go back to its original place in the slider and do this for the last image as well.

For all the images in between the first and last images, they will be pushed down. currently hovering on an image they will be pushed down and onMouseOut they will go back to its original place in the slider.

If className by default is unique-image can it be changed for the First Image as unique-image First , if its the last image then className should be unique-image Last and for all the in-between images it should be unique-image between . is this something that can be achieved?

Answer 1

As you are mapping over the images, you could use a tertiary operator:

const images = [...something];

images.map((image, key) => <img className={`unique-image ${key === 0 ? "First" : key == images.length - 1 ? "Last" : ""}`} {...otherProps} />

So you use the key from the map function to check for the first and last element and add the respective classes when reached.