Show multiple column on AMP carousel

Question

From what I've learned about <amp-carousel> it has only 2 types of carousel interface: carousel and slides, which you can see on the AMP example website. I need to create something like this, multiple columned carousel. Is AMP carousel able to achieve this?

Answer 1

You can't customize amp-carousel the way you want, you need to check out amp-base-carousel which allows you to set visible-count, advance-count and other useful properties.

The documentation.

Example :

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

With some style for the buttons :

.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;
}