Show multiple column on AMP carousel - 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;
}

Answer 2

In a way, yes.
You can use the slide interface, in under each section, but 4 entries.
<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>
I understand it won't be shifting with one entry at a time, but I suppose it would be near to what you want