amp-img not showing in carousel

I used an AMP carousel to show a list of articles abstracts.

For some reason only the abstracts which were visible at page load have pictures.

( If i rotate the screen more but not all pictures are loaded. )

What am i doing wrong?

Feel free to ask for more info.

Here's the layout:

<amp-carousel class="articles-carousel" layout="fixed-height" height="200" type="carousel">
    <article role="button" tabindex="1" class="article-abstract" on="tap:AMP.setState({selectedArticle:1072}),AMP.scrollTo('id' = 'article_1072')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/11.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב דוד חי הכהן</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1072" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>נקודות אור בימי אחאב(2)</h1>
        </header>
    </article>
    <article role="button" tabindex="2" class="article-abstract" on="tap:AMP.setState({selectedArticle:1108}),AMP.scrollTo('id' = 'article_1108')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/24.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב חיים בן סניור</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1108" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>מלחמת אחאב ובן הדד</h1>
        </header>
    </article>
    <article role="button" tabindex="3" class="article-abstract" on="tap:AMP.setState({selectedArticle:1112}),AMP.scrollTo('id' = 'article_1112')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1112" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>המוותר על דברי נביא</h1>
        </header>
    </article>
    <article role="button" tabindex="4" class="article-abstract" on="tap:AMP.setState({selectedArticle:1113}),AMP.scrollTo('id' = 'article_1113')">
        <footer>
            <amp-img height="128" layout="fixed" src="/server/929/rabbis/6.jpg" width="128"/>
            <div class="article-abstract-author">
                <address>
                    <a rel="author">הרב צבי שוויגר</a>
                </address>
            </div>
        </footer>
        <header>
            <a class="article-external-link-container" href="/929/307/1113" target="_blank">
                <i class="fas fa-external-link-alt"/>
            </a>
            <h1>עונש אחאב</h1>
        </header>
    </article>
</amp-carousel>

Here's the stylesheet:

.articles-carousel {
    padding: 1em 0;
}

.article-abstract {
    text-align: center;
    vertical-align: text-top;
    width: 155px;
    height: 200px;
}

.article-abstract:focus {
    outline: none;
}

.article-abstract:first-child {
    margin-right: 12px;
}

.article-abstract header {
    display: table;
    width: 141px;
    max-width: 100%;
}

.article-abstract h1 {
    display: table-cell;
    font-size: 12px;
    line-break: normal;
    margin: 0;
    text-align: center;
    width: 128px;
    word-break: break-word;
    white-space: normal;
}

.article-abstract footer {
    display: inline-flex;
}

.article-abstract-author {
    margin: 0px 3px 0 0;
    max-width: 12px;
}

.article-abstract-author address {
    transform: rotate(-90deg);
}

.article-abstract-author a {
    font-size: 11px;
}

.article-external-link-container {
    display: block;
    width: 16px;
}

You can see that only three of four pictures appeared:

UPDATE:

Bachcha Singh says it's a bug. After adding:

.articles-carousel {
    direction:ltr;
}
.articles-carousel  > div * {
    direction:rtl;
}

it now works. However, i will be glad to make it at least feel like rtl... say with setting initial position to carousel end.

UPDATE#2: Seems to be solved in amp-carousel-0.2.

Nothing is wrong with your code, after some R & D I found that This is a bug in rtl handling of lazy loading.

For now you can change the direction for amp-carousel and set the design according to your need, Till AMP team will not fixed this bug.

.articles-carousel { direction:ltr; }

If you can change the amp-carousel type carousel to slides, than its also work.