amp html button not clickable inside amp-list
Question
Apologies in advance - I think this is a minor typo somewhere, as I'm sure I had this working...
The short version of the question: In the AMP HTML below, both buttons are rendered but only the one outside the amp-list is clickable.
Longer version of the question below, in case it's useful.
I'm trying to implement a carousel with a number of time-related slides. One of those slides at an arbitrary position will relate to 'now'.
I want a user to be able to click a button that will take them to the slide that represents 'now'.
I'm getting the relevant carousel index that relates to 'now' from a json endpoint, then intending to set the button's ontap event in a mustache template to go to the relevant slide.
The button I'm displaying needs to be inside an amp-list, since that is how I'm retrieving the json that tells me which slide index to point to. But the button is only clickable if I place the button outside of the amp-list.
I'm pretty sure this is something stupid on my part, can anyone shed some light please?
<!doctype html>
<html âš¡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<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>
</head>
<body>
<!-- this button is clickable, and the event is fired: -->
<button on="tap:carousel.goToSlide(index=1)" >Go to slide 1</button>
<amp-list width="auto" height="200" src="<<JSON ENDPOINT>>">
<!-- this button is not clickable so no event is fired: -->
<button on="tap:carousel.goToSlide(index=1)" >Go to slide 1</button>
<template type="amp-mustache">
<amp-carousel layout="fill" type="slides" id="carousel" >
<amp-fit-text width="100" height="500" > carousel pos 1 </amp-fit-text>
<amp-fit-text width="100" height="500" > carousel pos 2 </amp-fit-text>
</amp-carousel>
</template>
</amp-list>
</body>
</html>
1 answers
solution1
0 2018-07-06 07:44:07
I am amusing that slider is static because amp-carousel does not render amp-img inside amp-list.
But button is clickable under amp-list
Json Url render the button under amp-list: Click Here
Code:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<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>
</head>
<body>
<amp-list width="auto" height="200" src="https://jsonblob.com/api/6345e24e-803b-11e8-82fe-f3dd1274ef25">
<template type="amp-mustache">
<button on="tap:carousel.goToSlide(index={{index}})" >Go to slide {{position}}</button>
</template>
</amp-list>
<amp-carousel layout="responsive" height="200" width="500" type="slides" id="carousel">
<amp-fit-text width="200" height="200" layout="responsive">Slider 1</amp-fit-text>
<amp-fit-text width="200" height="200" layout="responsive">Slider 2</amp-fit-text>
<amp-fit-text width="200" height="200" layout="responsive">Slider 3</amp-fit-text>
</amp-carousel>
</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.