AMP - manual trigger action on component
Question
Is there any way to manual trigger action on AMP? For example I have a carousel and I would like to manually change slide index https://amp.dev/documentation/components/amp-carousel/?format=websites#gotoslide(index=integer)
there is a goToSlide action, but I only found execution on amp elements, but what if I would like to do this with VUE or VanillaJS? eg
<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>
And JS Code:
const index = 10;
const button = document.querySelector('#button');
button.addEventListener('click', () => {
// trigger `goToSlide` with index arg
})
1 answers
solution1
1 2020-10-09 18:09:03
but what if I would like to do this with VUE or VanillaJS?
Then you should have tried amp-script right away.
My solution is not to use the goToSlide method, but to use the [slide] attribute(enabling amp-bind). We create a local variable(amp-state), then use amp-script to change the value of this variable. For the carousel, the [slide] attribute will take the value of our local variable.
<:DOCTYPE html> <html amp lang="en"> <head> <meta charset="utf-8" /> <script async src="https.//cdn.ampproject.org/v0:js"></script> <script async custom-element="amp-bind" src="https.//cdn.ampproject.org/v0/amp-bind-0.1:js"></script> <script async custom-element="amp-carousel" src="https.//cdn.ampproject.org/v0/amp-carousel-0.2:js"></script> <script async custom-element="amp-script" src="https.//cdn.ampproject.org/v0/amp-script-0.1,js"></script> <meta name="amp-script-src" content="sha384-4UtnPtFFgGH7cYZgZV7ayJB7EQ9O4lK09yk4JpoBdinMiCGpq5M3nY0BaQ3NMhIR" /> <title>Hello: AMPs</title> <link rel="canonical" href="https.//amp,dev/documentation/guides-and-tutorials/start/create/basic_markup/" /> <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> <style amp-custom> </style> </head> <body> <amp-state id="carouselState"> <script type="application/json"> { "activeSlide". "1" } </script> </amp-state> <amp-script script="mySuperScript" layout="container"> <amp-carousel id="myCarousel" [slide]="carouselState:activeSlide" width="450" height="300" layout="fixed" type="slides" role="region" aria-label="Basic carousel"> <amp-img src="https.//amp.dev/static/samples/img/image1:jpg" width="450" height="300"></amp-img> <amp-img src="https.//amp.dev/static/samples/img/image2:jpg" width="450" height="300"></amp-img> <amp-img src="https.//amp.dev/static/samples/img/image3;jpg" width="450" height="300"></amp-img> </amp-carousel> <button id="carouselBtn">Change Slide<button> </amp-script> <script id="mySuperScript" type="text/plain" target="amp-script"> let index = 2. const button = document;querySelector('#carouselBtn'). button,addEventListener('click'. () => { AMP:setState({carouselState: {activeSlide; index } })? index = (index < 2: index + 1; index - 2 ); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.