Ползунок React-Slick искажается при добавлении нескольких изображений после инициализации - PullRequest
Новая
       18

Ползунок React-Slick искажается при добавлении нескольких изображений после инициализации

3 голосов
/ 22 января 2020

Я использую ползунок React-slick для отображения изображений, предоставленных случайным пользовательским API. Я выполнил шаги, указанные на странице npm для ползунка реакции, установил гладкую карусель и добавил два компонента CSS к компоненту.

Я хотел добавить больше изображений в существующий ползунок, если пользователь нажал на следующую стрелку или перетащил ползунок влево, поэтому я использую обратный вызов afterChange , чтобы обновить мое состояние, чтобы можно было вызывать useEffect со значением этого состояния в качестве второго аргумента, а затем объединять предыдущий данные с новыми данными.

Здесь я заметил, когда пользователь нажимает кнопку «Далее» или перетаскивает ползунок влево, иногда возникает искажение.

https://stackblitz.com/edit/react-nlxodz имеет один ползунок и одну текстовую строку ниже двигайте ползунок непрерывно, и вы можете видеть, что в течение нескольких коротких секунд текст под ползунком перемещается еще дальше вниз, а затем возвращается на исходное место.

Документация предлагает следующее CSS, если на ползунке есть гибкая опора. Однако мой код не имеет свойств flex. 

Flexbox support
If you have flex property on container div of slider, add below css

* {
  min-height: 0;
  min-width: 0;
}

Эта проблема возникает из-за способа добавления данных в ползунок или из-за проблемы с CSS? Есть ли решение, в котором это искажение не отображается, когда пользователь сильно или сильно скользит?

1 Ответ

0 голосов
/ 22 января 2020

Wrap Slider с div 

 <div style={{ backgroundColor: "green", height: "140px" }}>
          <Slider {...settings}>
            {rowData.map(i => (
              <div>
                <img src={i.picture.large} />
              </div>
            ))}
          </Slider>
        </div>
        <div>KEEP AN EYE ON THIS TEXT WHILE SCROLLING</div>
...