[英]Show multiple column on AMP carousel
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.根据我对<amp-carousel>
它只有两种类型的轮播界面: carousel
和slides
,您可以在 AMP 示例网站上看到。 I need to create something like this, multiple columned carousel.我需要创建这样的东西,多列旋转木马。 Is AMP carousel able to achieve this? AMP 轮播能够实现这一目标吗?
In a way, yes.在某种程度上,是的。 You can use the slide
interface, in under each section, but 4 entries.您可以使用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>
I understand it won't be shifting with one entry at a time, but I suppose it would be near to what you want我知道它不会一次一个条目地移动,但我想它会接近你想要的
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.您无法按照您想要的方式自定义amp-carousel
,您需要查看amp-base-carousel
,它允许您设置visible-count
、 advance-count
和其他有用的属性。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.