Question

我像下面一样加载amp-carousel version2。

因为我希望允许自动播放。但是安培转盘指示器不能自动工作。（如果我点击一个指示器，它将起作用。）

我想与轮播（幻灯片）和指标链接。

・・我是日本人。对不起，我的英语不好。

<section class="area_content_slides">
  <amp-state id="carousel">
  <script type="application/json">{"slide":0}</script>
  </amp-state>
  <section>
    <amp-carousel id="panels" type="slides" autoplay delay="" layout="responsive" width="375" height="152" loop controls on="slideChange:AMP.setState({carousel:{slide: event.index}})">
      <a href="/aaa/index.html"><amp-img src="/img/panel/panel_aaa.png" width="375" height="152" layout="responsive" alt=""></amp-img></a>
      <a href="/bbb/index.html"><amp-img src="/img/panel/panel_bbb.jpg" width="375" height="152" layout="responsive" alt=""></amp-img></a>
      <a href="/ccc/index.html"><amp-img src="/img/panel/panel_ccc.png" width="375" height="152" layout="responsive" alt=""></amp-img></a>
      <a href="/ddd/index.html"><amp-img src="/img/panel/panel_ddd.png" width="375" height="152" layout="responsive" alt=""></amp-img></a>
      <a href="/eee/index.html"><amp-img src="/img/panel/panel_eee.jpg" width="375" height="152" layout="responsive" alt=""></amp-img></a>
      <a href="/fff/index.html"><amp-img src="/img/panel/panel_fff.jpg" width="375" height="152" layout="responsive" alt=""></amp-img></a>
    </amp-carousel>
    <p class="controller">
      <span [class]="carousel.slide==0 ? 'current' : ''" class="current" role tabindex="0" on="tap:panels.goToSlide(index=0)"></span>
      <span [class]="carousel.slide==1 ? 'current' : ''" role tabindex="1" on="tap:panels.goToSlide(index=1)"></span>
      <span [class]="carousel.slide==2 ? 'current' : ''" role tabindex="2" on="tap:panels.goToSlide(index=2)"></span>
      <span [class]="carousel.slide==3 ? 'current' : ''" role tabindex="3" on="tap:panels.goToSlide(index=3)"></span>
      <span [class]="carousel.slide==4 ? 'current' : ''" role tabindex="4" on="tap:panels.goToSlide(index=4)"></span>
      <span [class]="carousel.slide==5 ? 'current' : ''" role tabindex="5" on="tap:panels.goToSlide(index=5)"></span>
    </p>
  </section>
</section>

Answer 1

实施中的问题是不允许slideChange事件调用AMP.setState({})（您可以在控制台中看到错误消息："slideChange" is not allowed to invoke "AMP.setState".）。

这是一个使用放大器选择器和放大器轮播的工作版本。另一个好处是，由于不需要amp-bind，因此实现起来容易得多

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <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>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
  <style amp-custom>
    amp-selector [selected] {
      border: solid red;
    }
  </style>
</head>
<body>
 <amp-selector id="carouselWithPreviewSelector"
    class="carousel-preview"
    on="select:carouselWithPreview.goToSlide(index=event.targetOption)"
    layout="container">
    <amp-img option="0"
      selected
      src="https://unsplash.it/60/40?image=10"
      width="60"
      height="40"
      alt="a sample image"></amp-img>
    <amp-img option="1"
      src="https://unsplash.it/60/40?image=11"
      width="60"
      height="40"
      alt="a sample image"></amp-img>
    <amp-img option="2"
      src="https://unsplash.it/60/40?image=12"
      width="60"
      height="40"
      alt="a sample image"></amp-img>
    <amp-img option="3"
      src="https://unsplash.it/60/40?image=13"
      width="60"
      height="40"
      alt="a sample image"></amp-img>
  </amp-selector>
  <amp-carousel id="carouselWithPreview"
    autoplay 
    width="400"
    height="300"
    layout="responsive"
    type="slides"
    on="slideChange:carouselWithPreviewSelector.toggle(index=event.index, value=true)">
    <amp-img src="https://unsplash.it/400/300?image=10"
      layout="fill"
      alt="a sample image"></amp-img>
    <amp-img src="https://unsplash.it/400/300?image=11"
      layout="fill"
      alt="a sample image"></amp-img>
    <amp-img src="https://unsplash.it/400/300?image=12"
      layout="fill"
      alt="a sample image"></amp-img>
    <amp-img src="https://unsplash.it/400/300?image=13"
      layout="fill"
      alt="a sample image"></amp-img>
  </amp-carousel>
</body>
</html>

amp-carousel（自动）指示灯不工作

1 个答案: