amp-image-slider: support "vertical" case

[aghassemi]

No description provided.

[nainar]

Waiting on confirmation on internal channels regarding usecases here.

[aghassemi]

Legit use-case: https://www.kqed.org/science/1934405/see-the-camp-fire-smoke-from-space?linkId=100000004081074

Still don't like the fact that it messes up the scrolling but definitely a vertical slider makes more sense here than horizontal.

[TWsky]

Update another use-case here which my partner are just asking for it

(origin design page)

Guessing it won't be released in the near sprint, so I've thought of a work-around with using a div to wrapper the whole amp-image-slider, and make that div do the rotation.

#rotated {
   transform: rotate(90deg);
}

<div id="rotated">
    <amp-image-slider width="300" height="200" layout="responsive">
    <amp-img
      src="/img/canoe_900x600_blur.jpg"
      alt="A blurry image about canoeing"
      layout="fill"></amp-img>
    <amp-img
      src="/img/canoe_900x600.jpg"
      alt="An image about canoeing"
      layout="fill"></amp-img>
    </amp-image-slider>
  </div>

The main problem is the scroll gesture is still horizontal, guessing it's due to the implementation under amp-image-slider. Would also happy to hear if there is a better work-around.

[aghassemi]

@TWsky can't think a good workaround, really needs to be in the component itself.

@nainar I think P1/P2 makes sense for this since component is new (so in post-launch support mode) and use-cases for this has come up.

[nainar]

We should constrain the maximum dimensions that the image-slider can take up, to ensure that is enevr the full viewport allowing us to at least try to ensure that the user never ends up in the bad case.

Also best way forward is to probably add an attribute on the image slider called orientation.

@cathyxz

[cathyxz]

Do we have a project for the next fixit yet?

[nainar]

@cathyxz we do now: https://github.com/ampproject/amphtml/projects/67

[westonruter]

A new Image Compare block in the popular Jetpack plugin for WordPress has an option for vertical orientation which is currently blocked on AMP pages because the amp-image-slider component only supports horizontal. See Automattic/jetpack#15598.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[westonruter]

This is still needed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.