Amphtml: [amp-carousel] "slideChange" is not allowed to invoke "AMP.setState".
Hi!
We recently switched to amp-carousel v0.2 and in the console the error "slideChange" is not allowed to invoke "AMP.setState" pops up. In our case we use that feature to synchronize two sliders.
As far as I can see, we do not something special here, cause using slideChange to set a state is in the examples here and here.
The error is reproducible in the playground, if you paste this code (have a look at the actual dev console, as the playground console seems not to recognise this error):
<!doctype html>
<html âš¡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-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>
<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>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello AMPHTML World!</h1>
<amp-state id="product">
<script type="application/json">
{
"selectedSlideForGreen": 0
}
</script>
</amp-state>
<amp-carousel id="green-apple-carousel"
width="1024"
height="682"
layout="responsive"
type="slides"
[slide]="product.selectedSlideForGreen"
on="slideChange:AMP.setState({product: {selectedSlideForGreen: event.index}})"
class="fadeIn">
<amp-img src="/static/samples/img/green_apple_1_1024x682.jpg"
width="1024"
height="682"
layout="responsive"
on="tap:gallery-lightbox"
role="button"
tabindex="0">
</amp-img>
<amp-img src="/static/samples/img/green_apple_2_1024x685.jpg"
width="1024"
height="682"
layout="responsive"
on="tap:gallery-lightbox"
role="button"
tabindex="0">
</amp-img>
</amp-carousel>
</body>
</html>
Screenshot:
Probably related issues: #24705 .
dritter
All 13 comments
This occurs as amp-carousel 0.2 triggers slideChange on the initial render, but as a low trust event. We should consider just removing the firing of slideChange on the initial render (just ignore the first index change). While in theory, this could be useful for syncing two carousels together, carousel 0.1 never had this feature to begin with so it doesn't seem to be a big loss.
Note that if change slides (via arrow or swipe), you will not get this error message. Also note that if you use autoplay, you will get this message when autoplay changes slides.
sparhami
on 25 Sep 2019
@sparhami thanks for your help here! Unfortunately this has become a significant issue when using Autoplay on 0.2.
We are tracking the slide with dots that turn on/off based on the slide number.
ex:
o o O o o -> o o o O o -> o o o o O (dots advancing as the slides advance)
etc.
With 0.1, we were able to do this using setState, and when using autoplay this worked fine.
How can we accomplish this using 0.2?
Thanks
stephengardner
on 7 Dec 2019
Did anyone come up witha solution to this? It completely messed up 4 of our websites, as we were relying on a carousel on autoplay to submit a form that saves important information, and this destroyed even our organic rankings as users get disappointed and bounce off our websites :(
feryuk
on 30 Mar 2020
We have the same issue when slide the image carousel on mobile. The setState refuses to work.
huuvan20
on 7 Apr 2020
I have the same problem with autoplay and slideChange. This used to work perfectly before, but now the carousel on my site becomes messed up once autoplay triggers a different slide because I use setState() to style my carousel (custom dots, etc).
I tried with amp-carousel 0.1 and 0.2 - no difference. Would be nice if AMP stopped breaking my site every few months.
sryze
on 16 Apr 2020
+1 same issue
alexandr-kazakov
on 26 Jun 2020
I have this issue too and my situation is exactly the same as @stephengardner...
lengthtail
on 14 Jul 2020
Assigned @alanorozco to take a look since he's been focusing more lately on carousel.
kristoferbaxter
on 14 Jul 2020
I spent quite a bit of time today wondering why I kept seeing this message in the console. Turns out it's an issue that has persisted since September of last year. Yikes.
jakewantulok
on 21 Jul 2020
Hi folks, sorry for the inconvenience here.
Since the major usecase here is to add dots/thumbnails. We are directing folks to https://amp.dev/documentation/components/amp-inline-gallery/ which solves this usecase without the complicated logic of binding to <amp-state>
See duped issue here: https://github.com/ampproject/amphtml/issues/24335#issuecomment-593489617
nainar
on 22 Jul 2020
@nainar thanks a lot for directing us to a solution. Since it was unclear with this error message, perhaps to also include this link for clarification to learn more.
jakewantulok
on 22 Jul 2020
@nainar Is it possible to move the dots to the left side in amp-inline-gallery-pagination?
sryze
on 6 Aug 2020
@sryze I think the intention is to keep this thread closed with @ nainar's solution. I would suggest going here
jakewantulok
on 6 Aug 2020
Related issues
aghassemi
·
3Comments
mrjoro
·
3Comments
samanthamorco
·
3Comments
sryze
·
3Comments
aghassemi
·
3Comments
Most helpful comment
I have the same problem with autoplay and slideChange. This used to work perfectly before, but now the carousel on my site becomes messed up once autoplay triggers a different slide because I use setState() to style my carousel (custom dots, etc).
I tried with amp-carousel 0.1 and 0.2 - no difference. Would be nice if AMP stopped breaking my site every few months.