CODEWITHSUNDEEP
amp-html
Lucano Vera
Lucano Vera

Reputation: 101

Is there a way to change the slider animation speed?

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?

Upvotes: 6

Views: 2961

Answers (4)

debbiedalas
debbiedalas

Reputation: 11

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>

Upvotes: 1

Joe Kdw
Joe Kdw

Reputation: 2261

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

enter image description here

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.

Upvotes: 0

Guy
Guy

Reputation: 3096

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

Upvotes: 3

ReyAnthonyRenacia
ReyAnthonyRenacia

Reputation: 17623

This is the closest answer we can get with regard to carousel speed :

The autoplay property must be on and the default slide interval, which I think is the speed you're referring to, is 5 seconds. You can override this using the delay attribute.

autoplay (optional)

Advances the slide to the next slide without user interaction.

If present:

By default, advances a slide in 5000 millisecond intervals (5 seconds); this can be overridden by the delay attribute. Attaches the loop attribute to amp-carousel if loop is not already present. Requires at least 3 slides for autoplay to occur. Applies only to carousels with type=slides. delay (optional) Specifies the duration (in milliseconds) to delay advancing to the next slide when autoplay is enabled. The delay attribute is only applicable to carousels with type=slides.

Upvotes: 0

Related Questions