Javascript AMP-部件上的手动触发动作

有没有办法在放大器上手动触发动作？ 例如，我有一个旋转木马，我想手动更改幻灯片索引

有一个

goToSlide

操作，但我只在amp元素上发现了执行，但是如果我想用VUE或VanillaJS执行该怎么办？e、 g

<amp-carousel type="slides"
  width="450"
  height="300"
  controls
  loop
  autoplay
  delay="3000"  data-next-button-aria-label="Go to next slide"
  data-previous-button-aria-label="Go to previous slide"
  role="region"
  aria-label="Looping carousel">
  <amp-img src="/static/inline-examples/images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="/static/inline-examples/images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

<button id="test">Change<button>

但是如果我想用VUE或VanillaJS来做这件事呢

那么你应该马上尝试amp脚本

我的解决方案不是使用

goToSlide

方法，而是使用

[slide]

属性（启用amp-bind）。 我们创建一个局部变量（amp状态），然后使用amp脚本更改该变量的值。对于旋转木马，[slide]属性将获取本地变量的值

你好，AMPs
身体{
-webkit动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
-moz动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
-ms动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
动画：-amp开始8s步骤（1，结束）0s 1正常两个步骤；
}
@-webkit关键帧-amp开始{
从{
可见性：隐藏；
}
到{
能见度：可见；
}
}
@-moz关键帧-amp开始{
从{
可见性：隐藏；
}
到{
能见度：可见；
}
}
@-ms关键帧-amp开始{
从{
可见性：隐藏；
}
到{
能见度：可见；
}
}
@-o关键帧-amp开始{
从{
可见性：隐藏；
}
到{
能见度：可见；
}
}
@关键帧-amp开始{
从{
可见性：隐藏；
}
到{
能见度：可见；
}
}
身体{
-webkit动画：无；
-moz动画：无；
-ms动画：无；
动画：无；
}
{
“活动幻灯片”：“1”
}
换幻灯片
设指数=2；
const button=document.querySelector（“#carouselBtn”）；
按钮。addEventListener（'单击'，（）=>{
AMP.setState（{carouselState:{activeSlide:index}}）；
指数=（指数<2？指数+1：指数-2）；
});

const index = 10;
const button = document.querySelector('#button');

button.addEventListener('click', () => {
  // trigger `goToSlide` with index arg
})