amp-img未在轮播中显示 [英] amp-img not showing in carousel
本文介绍了amp-img未在轮播中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用了旋转木马以显示文章摘要列表. /p>
由于某些原因，只有页面加载时可见的摘要才具有图片.
(如果我进一步旋转屏幕，但不是所有图片都已加载.)
我在做什么错了?
随时询问更多信息.
这是布局:
<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>
这是样式表:
.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;
}
您可以看到只出现了四张图片中的三张:
更新:
Bachcha Singh说这是一个错误.添加后:
.articles-carousel {
direction:ltr;
}
.articles-carousel > div * {
direction:rtl;
}
现在可以使用了.但是，我将很高兴让它至少像rtl ...这样说，将初始位置设置为轮播结束.
UPDATE#2: 似乎要在amp-carousel-0.2中解决.
解决方案
经过一段R&之后，您的代码没有问题. D我发现这是rtl处理延迟加载的错误.
现在，您可以更改放大器轮播的方向并根据需要设置设计，直到AMP团队都无法修复此错误.
.articles-carousel { direction:ltr; }
如果您可以将amp-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.
这篇关于amp-img未在轮播中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
