AMP - manual trigger action on component

user_5384349 0
Viewed 270

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? 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>

And JS Code:

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

button.addEventListener('click', () => {
  // trigger `goToSlide` with index arg
})
amp-html html javascript
1 Answers

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>

user_74600380
Related