Изменить имя класса на основе позиции указателя слайдера - PullRequest
Новая
       16

Изменить имя класса на основе позиции указателя слайдера

0 голосов
/ 01 апреля 2020

Я хочу изменить className на основе выбранного ползунка data-index положение в https://stackblitz.com/edit/react-slick-slider-issues, которое использует React- slick-slider .

Предположим, что если пользователь наведет курсор на первое изображение, значение data-index будет равным 0, а я хочу добавить sh изображение над слайдером и onMouseOut изображение go вернется на свое первоначальное место в ползунке и сделает это также для последнего изображения.

Для всех изображений между первым и последним изображениями, они будут сбиты. в данный момент на изображении они будут перемещены, и onMouseOut вернутся go на свое первоначальное место в слайдере.

Если className по умолчанию равно unique-image можно ли изменить для первого изображения как unique-image First , если это последнее изображение, то className должно быть unique-image Last и для всех промежуточных изображений это должно быть unique-image между . это то, что может быть достигнуто?

1 Ответ

0 голосов
/ 01 апреля 2020

Когда вы отображаете изображения, вы можете использовать третичный оператор: 

const images = [...something];

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

Таким образом, вы используете ключ из функции карты для проверки первого и последнего элемента и добавления соответствующих классов, когда достиг.

...