Ползунок React-Slick не изменяется при изменении стиля контейнера.
У меня есть компонент-слайдер реагировать-скользко в контейнере div с атрибутом стиля. В зависимости от обстоятельств я меняю местоположение и размер контейнера div и использую атрибут перехода для анимации между состояниями.
Вот код для jsx:
<div className="modal"
style={Object.assign({},
createModalStyle1(state.modalLeft, state.modalTop, state.modalWidth, state.modalHeight),
state.modalReady && createModalStyle2())}>
<Slider {...settings} initialSlide={state.modalCurrentPhoto - 1}>
{state.modalPhotos.map(photo => (
<div className="modal__image"
style={createImgStyle(photo.id)}
key={photo.id}>
</div>
))}
</Slider>
</div>
createImgStyle(photo.id) создает фоновое изображение с
background-size: contain;
поэтому он заполняет все пространство внутри div, сохраняя соотношение сторон изображения. Когда я отрисовываю div, я сначала вызываю createModalStyle1:
const createModalStyle1 = (left, top, width, height) => {
return {
left,
top,
width,
height,
transition: '.5s all linear',
};
};
что позволяет мне позиционировать контейнерный элемент в соответствующем месте и устанавливать его ширину и высоту (модал имеет фиксированную позицию). Затем я устанавливаю для state.modalReady значение true и снова визуализирую элемент, на этот раз также вызывается createModalStyle2:
const createModalStyle2 = () => {
return {
top: '10%',
left: '10%',
width: '80%',
height: '80%',
};
};
что заставляет контейнерный элемент расти и заполнять центр 80% области просмотра.
Проблема: когда я выращиваю контейнер div, слайдер внутри него не срастается с ним. Как только я изменю размер окна просмотра, он сразу же адаптируется, но не тогда, когда я просто изменяю значения в атрибуте style. Как я могу заставить элемент слайдера следовать размеру его родителя, когда происходит переход?