Amphtml: Consider exposing next/previous/goto triggers for amp-carousel/slides

[mkhatib]

One example this can be very useful for is multi-step forms/polls/quiz like the following:

<form on="submit:quiz1.goto(6)">
  <amp-carousel type="slider" disable-user-interaction id="quiz1">
      <div class="question1">
          <input type="radio">
          <input type="radio">
          <input type="radio">
          <input type="radio">
          <input type="button" on="tap:quiz1.next">
      </div>
      <div class="question2">
          <input type="radio">
          <input type="radio">
          <input type="radio">
          <input type="radio">
          <input type="button" on="tap:quiz1.next">
      </div>
      <div class="question3">
          How old are you?
          <input type="radio" on="change:quiz1.next"> Younger than 18
          <input type="radio" on="change:quiz1.goto(5)"> Older than or exactly 18
      </div>
      <div class="question4">
          Did your parent/guardian help you fill this out?
          <input type="radio"> Yes
          <input type="radio"> No
          <input type="button" on="tap:quiz1.next">
      </div>
      <div class="submit">
            <input type="submit">
      </div>
      <div class="success">
          Cool thanks!
      </div>
  </amp-carousel>
</form>

This might need to also introduce disable-user-interaction attribute to allow preventing user from navigating in a usual swiping matter and disable.

An alternative is to introduce an amp-selector that have similar functionality.

[camelburrito]

what does this solve? any particular use-case or was there a request from some one. This is super easy to expose. Trying to understand if this is necessary.

[mkhatib]

Does the example above not help explain how this might be useful?

[camelburrito]

my bad :) did not see the form above . makes sense for polls. May be make next the default action is probably what you need., because you will use the arrrow/swipe to go back.

[ericlindley-g]

Related: would be good to have a way to advance to a particular item index for the scrollable carousel as well.

This does not relate to the use-cases described in the current issue, but is useful in the context of https://github.com/ampproject/amphtml/issues/5020, for instance, to advance a scrollable nav to a particular item on load.

[mkhatib]

Discussing this during format review, the main question of moving forward with this is whether to just wait for binding protocol to do this or implement this by supporting the mentioned triggers.

[mkhatib]

Closing this - @camelburrito implemented goToSlide action on slidescroll that should work well with amp-bind.