amp carousel arrow mark disappearing after few seconds in mobile version

Question

I am trying to develop an AMP for our website.

I have a problem with AMP carousel arrow on my mobile site.

AMP carousel arrow marks is disappearing after few seconds in mobile version.

I want to keep it displayed. Can any body help me how to achieve this.

<amp-carousel id="carousel-with-preview"
    width="450"
    height="300"
    layout="responsive"
    type="slides">
    <amp-img src="images/image1.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="apples"></amp-img>
    <amp-img src="images/image2.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="lemons"></amp-img>
    <amp-img src="images/image3.jpg"
      width="450"
      height="300"
      layout="responsive"
      alt="blueberries"></amp-img>
  </amp-carousel>
  <div class="carousel-preview">
    <button on="tap:carousel-with-preview.goToSlide(index=0)">
      <amp-img src="images/image1.jpg"
        width="60"
        height="40"
        alt="apples"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=1)">
      <amp-img src="images/image2.jpg"
        width="60"
        height="40"
        alt="lemons"></amp-img>
    </button>
    <button on="tap:carousel-with-preview.goToSlide(index=2)">
      <amp-img src="images/image3.jpg"
        width="60"
        height="40"
        alt="blueberries"></amp-img>
    </button>
  </div>

Answer 1

Adding the controls parameter to your <amp-carousel> tag forces the controls to stay visible, even on mobile.

I tested this on amp-playground and it seems to force the controls to stay visible, even on mobile.

Code example:

<amp-carousel
  width="450"
  height="300"
  controls
  layout="responsive"
  type="slides">
<amp-img src="https://www.abelandcole.co.uk/media/205_14408_z.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="apples"></amp-img>
<amp-img src="https://www.dailysignal.com/wp-content/uploads/Lemons4-1250x650.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="lemons"></amp-img>
<amp-img src="https://draxe.com/wp-content/uploads/2014/07/BlueberryBenefitHeader.jpg"
  width="450"
  height="300"
  layout="responsive"
  alt="blueberries"></amp-img>
</amp-carousel>

controls (optional)

Displays left and right arrows for the user to navigate carousel items on mobile devices. The visibility of arrows can also be controlled via styling, and a media query can be used to only display arrows at certain screen widths. On desktop, arrows are always displayed unless only a single child is present.