i'm building amp website and i used an amp-carousel:
https://ampbyexample.com/components/amp-carousel/
https://www.ampproject.org/es/docs/reference/components/amp-carousel
I'm using the carousel with the "slides" and "autoplay" options as a main banner for the homepage and i'm trying to change the animation speed when it advances slides.
Is there a way to set the animation speed or is there a feature request for this?
Transition speed doesn't seem to be supported at the moment. I'm facing the same issue and couldn't find any documentation or attributes to control the animation speed. The default value is too fast and doesn't look very good
You can hide the carousel and use the amp selector to create your own. Not the cleanest way but at least you have full control.
.carouselWrapper{
position: relative;
}
.carouselOverideSlider{
background-color: #fff;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
.carouselOverideSlider li[aria-selected="true"] amp-img{
transition: transform 15s;
transform-origin: 50% 50% 0px;
transform: scale(1.1);
}
.carouselOverideSlider li[option][selected] {
opacity:1;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.carouselOverideSlider li{
opacity:0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.carouselOverideSlider ul, .carouselOverideSlider li{
margin:0;
padding:0;
list-style:none;
}
.dots-container {
position: absolute;
display: flex;
justify-content: center;
bottom: 0;
right: 0;
left: 0;
z-index:110;
}
.dots {
max-width: 150px;
text-align: center;
align-self: center;
}
.dots li {
width:13px;
height:13px;
margin:13px;
border-radius:10px;
border:1px solid rgba(0,0,0,0.3);
background:rgba(255,255,255,0.5);
display:inline-block;
}
.dots li[option][selected] {
outline:0px solid rgba(0,0,0,0.7);
border:1px solid #1da838;
background:#fff;
}
.amp-carousel-button{
display:none;
}<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="This is the AMP Boilerplate.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<!-- Import other AMP Extensions here -->
<style amp-custom>
/* Add your styles here */
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<link rel="canonical" href=".">
<title>My AMP Page</title>
</head>
<body>
<div class="carouselWrapper">
<amp-carousel id="custom-button"
width="800"
height="533"
layout="responsive"
type="slides"
autoplay
delay="5000"
on="slideChange:
debbie.toggle(index=event.index, value=true),
dalas.toggle(index=event.index, value=true)">
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/View_from_Reunion_Tower_August_2015_13.jpg/800px-View_from_Reunion_Tower_August_2015_13.jpg"
width="800"
height="533"
layout="responsive"
alt="a sample image"></amp-img>
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Dallas.svg/800px-Flag_of_Dallas.svg.png"
width="800"
height="533"
layout="responsive"
alt="another sample image"></amp-img>
</amp-carousel>
<div class="carouselOverideSlider">
<amp-selector id="dalas">
<ul class="">
<li option="0" selected>
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/View_from_Reunion_Tower_August_2015_13.jpg/800px-View_from_Reunion_Tower_August_2015_13.jpg"
width="800"
height="533"
layout="responsive"
alt="a sample image"></amp-img>
</li>
<li option="1">
<amp-img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Dallas.svg/800px-Flag_of_Dallas.svg.png"
width="800"
height="533"
layout="responsive"
alt="another sample image"></amp-img>
</li>
</ul>
</amp-selector>
</div>
<div class="dots-container">
<amp-selector id="debbie"
on="select:custom-button.goToSlide(index=event.targetOption)"
layout="container">
<ul id="carouselDots" class="dots">
<li option="0" selected></li>
<li option="1"></li>
</ul>
</amp-selector>
</div>
</body>
</html>Perhaps, you can use fade for slide transition which I found here. That's not bad :)
.amp-carousel-slide {
opacity:0;
}
.amp-carousel-slide[aria-hidden=false] {
transition:opacity 1s;
opacity:1;
But, if you use image gallery in the amp-carousel, the opacity must be changed into 0.4 or more. Otherwise, the image preview will not show. :v
Example:
.amp-carousel-slide {opacity:0.7;}
More ... (still in image preview of image gallery), to make it good look, we can add:
.amp-carousel-slide:hover{
opacity:1;
cursor:pointer;
}
on pointer hover.