Ползунок 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. Как я могу заставить элемент слайдера следовать размеру его родителя, когда происходит переход?

0 ответов

Другие вопросы по тегам