根据滑块索引位置更改类名

2024-06-03 • 问答

我想根据在https://stackblitz.com/edit/react-slick-slider-issues中选择的滑块数据索引位置来更改 classname ，该位置正在使用 React-slick-滑块。

假设用户将鼠标悬停在第一张图像上，则图像 data-index 的值为0，我想将图像推到滑块上方，然后将 onmouseOut 返回到滑块中的原始位置，并对最后一张图片也进行此操作。

对于第一张和最后一张图像之间的所有图像，它们将被向下推。当前将它们悬停在图像上，它们将被向下按下，并且 onmouseOut ，它们将返回到其在滑块中的原始位置。

如果默认情况下 classname 是 唯一图像 ，可以将“第一张图像”更改为 唯一图像首先 ，如果它是最后一张图片，则 classname 应该是 唯一图片最后一张 ，并且对于所有图像之间应该是之间的唯一图像。这可以实现吗？

tangnande 回答：根据滑块索引位置更改类名

在图像上进行映射时，可以使用三级运算符：

const images = [...something];

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

因此，您可以使用map函数中的键来检查第一个和最后一个元素，并在到达时添加相应的类。

css javascript react-slick reactjs

本文链接：https://www.f2er.com/2537646.html

根据滑块索引位置更改类名

tangnande 回答：根据滑块索引位置更改类名

大家都在问