amp 不适用于引导轮播答案

【问题标题】：amp does not work with bootstrap carouselamp 不适用于引导轮播
【发布时间】：2017-07-30 13:33:45
【问题描述】：

我正在使用引导轮播，我已将图像标签从 img 更改为 amp-img。我只能看到第一张图像被转换为放大器，但下一张图像没有。我可以在控制台中看到amp-tag 内第一个图像的img 标签，但第二个img 标签不在amp-tag 中。请看控制台截图。

img tag converted to amp

jsfiddle

【问题讨论】：

制作一个 jsfiddle/plunker
我添加了jsfiddle

标签： twitter-bootstrap amp-html

【解决方案1】：

这不是轮播问题，这是不同的，请查看 AMP 的 documentation，他们准确地描述了完美生成 amp 图像所需的设置

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-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>
  <style amp-custom>
    h1 {
      margin: 16px;
    }
  </style>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">




  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>


    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <amp-img src="http://mytonic-revamp-staging.s3.amazonaws.com/revamp/s3fs-public/Chat_adapt_English_0.png" alt="..." width="720" height="480"></amp-img>
        </div>
        <div class="item">
            <amp-img src="http://mytonic-revamp-staging.s3.amazonaws.com/revamp/s3fs-public/Keep-calm-and-fare-well-in-your-exams-New-Website-Article-Carousel_0.jpg" alt="..." width="720" height="480"></amp-img>
        </div>

    </div>


    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>

在移动屏幕上检查这一点，由于内容被阻止，没有 sn-p 或 fiddle 能够生成图像，您可以检查给定 fiddle 的控制台（在那里使用最新版本的 bootstrap.min.js），您生成的快照图片

【讨论】：