1

ドットがうまく機能している amp カルーセルがありますが、スワイプしてスライドを変更すると、スライド ショーの下部にあるドットは、スライド トランジション アニメーションが完了するまで新しいアクティブなスライドに変わりません。約 1 秒の遅延。

スライドショーは次のように定義されています。

<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>

次に、ドットは次のように定義されます。

<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>

したがって、ボタンの画像スタイルのシフトは、一致するスライドの状態が「選択」されたときです。

ドットのスタイルの遷移は非常に高速 (0.01 秒) であるため、アニメーションの速度がそれを支えているわけではありません。

スライドがページャー ドットでもう少しスムーズに移行できるように、最後ではなく、スワイプ アクションの開始時または自動再生遷移でスタイルの変更をトリガーする方法はありますか?

4

1 に答える 1

0

0.2 で動作するようになりましたが、スライド スワップと同時にではなく、スライドの移行が終了した後もページャー アイコンがフェードしています。

于 2020-01-21T20:17:34.563 に答える