Простая галерея автозапуска с Flickity & React

Итак, я пытаюсь создать такую ​​галерею с помощью Flickity и React, но у меня появляется какое-то странное мерцание, и анимация не запускается, пока я не попытаюсь изменить размер (выходного) окна, а затем все будет играть хорошо. В Firefox иногда это работает, иногда нет, а Chrome отказывается сотрудничать полностью. Возможно, стоит упомянуть, что я сделал эту работу с простым Javascript и Flickity, так что я думаю, что я делаю что-то не так в React. Вот код:

HTML:

<div id="main"></div>

ReactJS

var Gallery = React.createClass({
    componentDidMount: function() {
        this.flkty = new Flickity('.gallery', {
            freeScroll: true,
            wrapAround: true,
            prevNextButtons: false,
            pageDots: false,
            freeScrollFriction: 0.00,
            lazyLoad: 2
        });
        this.flkty.velocity = 1;
        this.flkty.isFreeScrolling = true;
        this.flkty.startAnimation();
    },
    render: function() {
    return (
        <div className="gallery">
            <div key="01" className="gallery-cell">
                <img src="http://placehold.it/450x1500" />
            </div>
            <div key="02" className="gallery-cell">
                <img src="http://placehold.it/850x1200" />
            </div>
            <div key="03" className="gallery-cell">
                <img src="http://placehold.it/150x1500" />
            </div>
            <div key="04" className="gallery-cell">
                <img src="http://placehold.it/1850x1500" />
            </div>
            <div key="05" className="gallery-cell">
                <img src="http://placehold.it/650x1000" />
            </div>
            <div key="06" className="gallery-cell">
                <img src="http://placehold.it/350x2500" />
            </div>
        </div>
    )}
});

ReactDOM.render(
    <Gallery />, 
    document.getElementById('main')
);

SCSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #833;
}

div#main {
    margin: 0 auto;
    width: 750px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}

.gallery {
    background: #EEE;
    overflow: hidden;
}

.gallery-cell {
    display: inline-block;
    height: 100vh;
    img {
        border-left: 2px solid #444;
        height: 100%;
    }
}
Источник

3 ответа

Решение

Согласно документам, "выгруженные изображения не имеют размера, который может отбрасывать позиции ячеек. Чтобы исправить это, опция imagesLoaded переставляет ячейки после загрузки их изображений".

Однако "в качестве отдельного пакета Flickity не включает в себя код imagesLoaded, asNavFor и bgLazyLoad. Эти пакеты могут потребоваться отдельно".

Итак, чтобы решить проблему, мне пришлось сделать следующее:

ШАГ 1: npm устанавливает загруженные изображения --save

ШАГ 2: требуется ('flickity-imagesloaded');

ШАГ 3: добавить флаг imagesLoaded в конструктор Flickity.

componentDidMount: function() {
    this.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: 2,
        imagesLoaded: true
    });
Источник

Я не уверен, что это решит ваш ответ, но вы можете попробовать что-то похожее на другой мой ответ Используя MetricsGraphics.js с ReactJS, используя refs, Но, честно говоря, я волнуюсь, это что-то, связанное с Flickity библиотека, которую вы используете, а не React,

Источник

Выглядит как состояние гонки для меня. Я знаю, что это не самое красивое решение, но попробуйте это:

  componentDidMount: function() {
    var self = this;

    setTimeout(function(){
      self.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: true
      });
      self.flkty.velocity = 1;
      self.flkty.isFreeScrolling = true;
      self.flkty.startAnimation();
     }, 500);
},

В документации Reacts componentDidMount:

Если вы хотите интегрироваться с другими средами JavaScript, установить таймеры с помощью setTimeout или setInterval или отправить запросы AJAX, выполните эти операции в этом методе.

Теперь, когда вы знаете, что это состояние гонки, посмотрите, есть ли событие, которое вы можете подождать, чтобы запустить карусель, чтобы вы не полагались на setTimeout.

Источник
Другие вопросы по тегам