Скользить при изменении ширины прыгает на старт - PullRequest
Новая
       35

Скользить при изменении ширины прыгает на старт

0 голосов
/ 25 июня 2019

Я использую карусель скольжения. Я сделал это как компонент, передавая ему элементы как дети.Когда страница загружается, слайдер отлично работает с бесконечным циклом.Как только я изменяю ширину браузера без перезагрузки, когда дело доходит до последнего слайда, он переходит на первый слайд.Как предотвратить эту ошибку?В componentDidMount есть условие, если ширина меняет его, то ползунок сброса.

componentDidUpdate(prevProps) {
    if (
      children.length !== prevProps.children.length ||
      width !== prevProps.width
    ) {
      this.reinitSlider();
    }
  }

reinitSlider = () => {
    this.setState(
      {
        slides: [],
        currentSlide: 0,
        settings: this.props.settings
      },
      () => {
        this.slider = null;
        this.initSlider();
      }
    );
  };

--------------------------------------------------------------------
  if (children && Array.isArray(children) && children.length) {
      this.setState(
        {
          slides: children.map((el, i) => (
            <li className="glide__slide" key={i} data-slide={i}>
              {el}
            </li>
          ))
        },
        () => {
          const { settings } = this.state;
          this.slider = new Glide(`#${this.id}`, {
            autoplay: this.state.slides.length > 1 ? 5000 : false, // FIXME enable autoplay
            animationDuration: 1000,
            type: 'carousel',
            classes: {
              cloneSlide: 'clone'
            },
            animationTimingFunc: 'ease',
            perView: promoSlider ? 2 : 1,
            gap: promoSlider ? 30 : 0,
            breakpoints: promoSlider
              ? {
                  1100: {
                    perView: 2,
                    gap: 30,
                    peek: 30
                  },
                  600: {
                    perView: 1,
                    gap: 0,
                    peek: 0
                  }
                }
              : {},
            ...settings
          })
...