Is there a way to speed up the pager dots on an AMP-Carousel slider during a slide transition?

Question

I have an amp carousel with dots working well, but when I swype to change slides, the dot at the bottom of the slideshow won't change to the new active slide until the slide transition animation is complete, which makes it appear to have a delay of about a full second.

The slideshow is defined with:

<amp-carousel type="slides" layout="responsive" width="16" height="9" data-amp-bind-slide="selectedSlide" on="slideChange:AMP.setState({selectedSlide: event.index})" autoplay loop>
< SLIDES HERE >
</amp-carousel>

then the dots are defined with:

<amp-state id="cmidotstate"><script type="application/json">
    { "cmidots.0": 'selected' }
  </script></amp-state><amp-carousel id="cmidots" controls width="400" height="100"><div data-amp-bind-class="selectedSlide == 0 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 0})" role="button" tabindex="0" class="selected"></div>
            <div data-amp-bind-class="selectedSlide == 1 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 1})" role="button" tabindex="1"></div>
            <div data-amp-bind-class="selectedSlide == 2 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 2})" role="button" tabindex="2"></div>
            <div data-amp-bind-class="selectedSlide == 3 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 3})" role="button" tabindex="3"></div>
            <div data-amp-bind-class="selectedSlide == 4 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 4})" role="button" tabindex="4"></div>
            <div data-amp-bind-class="selectedSlide == 5 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 5})" role="button" tabindex="5"></div>
            <div data-amp-bind-class="selectedSlide == 6 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 6})" role="button" tabindex="6"></div>
            <div data-amp-bind-class="selectedSlide == 7 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 7})" role="button" tabindex="7"></div>
            <div data-amp-bind-class="selectedSlide == 8 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 8})" role="button" tabindex="8"></div>
            <div data-amp-bind-class="selectedSlide == 9 ? 'selected' : ''" on="tap:AMP.setState({selectedSlide: 9})" role="button" tabindex="9"></div>
          </amp-carousel>

So, the image style shift on the buttons is when the state of the matching slide becomes "selected"

The style on the dots has a very fast transition, (0.01s) so it's not the animation speed holding things up.

Is there a way to trigger the style change at the start of the swype action, or the autoplay transition, as opposed to at the end, so the slides can transition a little more smoothly with the pager dots?

Answer 1

I got it working with 0.2 but it's still fading the pager icon after the slide is finished transitioning rather than simultaneous to the slide swap.