移动端AMP Carousel箭头几秒后消失，如何设置持续显示？

Hey there! I get it—having those carousel arrows disappear after a few seconds on mobile can be frustrating for users who need clear navigation. Let's get those arrows stuck around permanently.

By default, AMP Carousel hides the navigation arrows on mobile after a short delay to save screen space. To override this behavior, we can use custom CSS to force the arrows to stay visible. Here's how:

Step 1: Add Custom CSS #

Insert this inside your <style amp-custom> tag (make sure you have one in your AMP page's <head>):

amp-carousel > div[role="button"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;
}

What this does: #

• opacity: 1 !important: Forces the arrows to stay fully visible instead of fading out.
• pointer-events: auto !important: Ensures the arrows remain clickable at all times.
• transition: none !important: Removes the fade-out animation that AMP applies by default.

Step 2: Full Working Example #

Here's your original code updated with the fix included:

<style amp-custom>
  amp-carousel > div[role="button"] {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }
  .carousel-preview {
    display: flex;
    gap: 10px;
    margin-top: 10px;
  }
  .carousel-preview button {
    border: none;
    padding: 0;
    cursor: pointer;
  }
</style>

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

This will make sure the navigation arrows stay visible on mobile devices indefinitely, giving your users consistent access to carousel controls.

内容的提问来源于stack exchange，提问作者naresh babu