Amp html 如何使amp base转盘立即显示图像并顺利工作
我正试图为一个网站的顶级新闻栏目制作一个旋转木马。为了实现这一点，我使用了基于amp的旋转木马组件。然而，它似乎不能正常工作，正如您在这个测试站点上看到的：（在移动/平板设备上） 以下问题值得注意：Amp html 如何使amp base转盘立即显示图像并顺利工作,amp-html,Amp Html,我正试图为一个网站的顶级新闻栏目制作一个旋转木马。为了实现这一点，我使用了基于amp的旋转木马组件。然而，它似乎不能正常工作，正如您在这个测试站点上看到的：（在移动/平板设备上） 以下问题值得注意： 虽然我尝试了预加载，但并非所有图像都会立即加载（如我所愿） 刷卡不顺畅，因为它在刷卡速度稍快的情况下意外跳过了2个图像 如果刷得太快，它会在最后一个图像处停止；及 有时两次滑动之间会出现延迟（好像它试图刷新） 有人能解释这些问题吗？有没有办法解决这个问题？如果没有，是否可以使用Owl转盘和amp脚本
预加载放大器列表<html ⚡>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="canonical" href="https://otoman.net/29/index.html" />
<link rel="icon" type="image/png" href="https://i.ibb.co/WyrtHT5/otoman-favicon-03.png">
<link rel="preload" href="https://i.ibb.co/FK9ZrDP/ezgif-com-gif-maker-51.jpg" as="image">
<link rel="preload" href="https://i.ibb.co/SK8Q9GR/ezgif-com-gif-maker-49.jpg" as="image">
<link rel="preload" href="https://i.ibb.co/K71vXzt/ezgif-com-resize-30.jpg" as="image">
<link rel="preload" href="https://i.ibb.co/CwyzcZw/ezgif-com-gif-maker-42.jpg" as="image">
<link rel="preload" href="https://i.ibb.co/G0rZ9M7/ezgif-com-gif-maker-38.jpg" as="image">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<style amp-custom>
html {
scroll-behavior: smooth;
}
.hp-img {
margin: auto;
border-radius: 5px;
box-shadow: 0 0 10px 0px #f2f2f2;
}
.hp-container {
position: relative;
overflow: hidden;
padding-left: 15px;
}
.hp-container:active {
outline: none;
border: none;
}
.hp-container:focus {
outline: none;
border: none;
}
</style>
</head>
<body>
<amp-base-carousel dir="ltr" width="100vw" height="68vw" heights="(min-width: 769px) 30.5vw, (min-width: 501px) 38vw, 68vw" layout="responsive" advance-count="1" visible-count="(min-width: 769px) 3.2, (min-width: 501px) 2.5, 1.4" snap-by="1" style="background:transparent" loop="true">
<div class="hp-container">
<amp-img class="hp-img" src="https://i.ibb.co/FK9ZrDP/ezgif-com-gif-maker-51.jpg" width="80vw" height="80vw" layout="responsive"></amp-img>
</div>
<div class="hp-container">
<amp-img class="hp-img" src="https://i.ibb.co/SK8Q9GR/ezgif-com-gif-maker-49.jpg" width="80vw" height="80vw" layout="responsive"></amp-img>
</div>
<div class="hp-container">
<amp-img class="hp-img" src="https://i.ibb.co/K71vXzt/ezgif-com-resize-30.jpg" width="80vw" height="80vw" layout="responsive"></amp-img>
</div>
<div class="hp-container">
<amp-img class="hp-img" src="https://i.ibb.co/CwyzcZw/ezgif-com-gif-maker-42.jpg" width="80vw" height="80vw" layout="responsive"></amp-img>
</div>
<div class="hp-container">
<amp-img class="hp-img" src="https://i.ibb.co/G0rZ9M7/ezgif-com-gif-maker-38.jpg" width="80vw" height="80vw" layout="responsive"></amp-img>
</div>
</amp-base-carousel>
</body>
</html>
测试
body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
html{
滚动行为：平滑；
}
.hp img{
保证金：自动；
边界半径：5px；
盒影：0 0 10px 0 px#f2f2；
}
.hp容器{
位置：相对位置；
溢出：隐藏；
左侧填充：15px；
}
.hp容器：活动{
大纲：无；
边界：无；
}
.hp容器：焦点{
大纲：无；
边界：无；
}