在AMP轮播上显示多列

Question

根据我对<amp-carousel>的了解，它只有两种类型的轮播界面：carousel和slides，您可以在AMP示例网站上看到。我需要创建这样的东西，多个圆柱形旋转木马。 AMP旋转木马能够达到这个目的吗？

Answer 1

您无法按照自己的方式自定义amp-carousel，需要检出amp-base-carousel，以便您设置visible-count，advance-count和其他有用的属性。 / p>

The documentation.

示例：

 <amp-base-carousel
  loop="true"
  height="450"
  layout="fixed-height"
  visible-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
  advance-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
>
  <div>slide1</div>
  <div>slide2</div>
  <div>slide3</div>
  <div>slide4</div>
  <button slot="next-arrow" class="carousel-next" aria-label="Next">
    <i class="fas fa-chevron-circle-right"></i>
  </button>
  <button slot="prev-arrow" class="carousel-prev" aria-label="Previous">
    <i class="fas fa-chevron-circle-left"></i>
  </button>
</amp-base-carousel>

为按钮添加一些样式：

.carousel-prev, .carousel-next {
          filter: drop-shadow(0px 1px 2px #4a4a4a);
          width: 40px;
          height: 40px;
          padding: 20px;
          background-color: transparent;
          border: none;
          outline: none;
          font-size: 24px;
          opacity:0.7;
}

Answer 2

在某种程度上，是的。 您可以在每个部分下使用slide界面，但只能使用4个条目。

  <amp-carousel height="300" layout="fixed-height" type="slides">
    <div>
      <div class="blue-box"> 1 </div>
      <div class="red-box"> 2 </div>
      <div class="green-box"> 3 </div>
      <div class="yellow-box"> 4 </div>
    </div>
    <div>
      <div class="blue-box"> 9 </div>
      <div class="red-box"> 8 </div>
      <div class="green-box"> 7 </div>
      <div class="yellow-box"> 6 </div>
    </div>
  </amp-carousel>

我知道它不会一次只用一个条目移动，但我想它会接近你想要的东西