amp-base-carousel – Images after the first slide don’t fill full width (leave margins on left/right)

[prowessclust]

Description

I’m using in a responsive layout and noticed an issue:

Expected Behavior

• Each image should fully fill the carousel width when it is active, the same as the first slide.

Actual behavior

• The first image fills the width as expected.

• From the second image onward, there is extra space (padding/margin) visible on the left and right, so the image doesn’t fully span the container.

• The images are all the same dimensions and have layout="responsive", so this seems to be a carousel rendering/layout bug.

Reproduction Steps

Steps to reproduce:

1. Go to https://playground.amp.dev/

2. Copy Paste this code inside body tag

<amp-base-carousel loop="true" width="400" height="500" layout="responsive"> <amp-img src="https://images.unsplash.com/photo-1742201473141-07daabc7a327?q=80&w=1064&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="400" height="500" layout="responsive"></amp-img> <amp-img src="https://images.unsplash.com/photo-1750218537952-0ae056c7f53a?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="400" height="500" layout="responsive"></amp-img> <amp-img src="https://images.unsplash.com/photo-1755048796967-75a82d214846?q=80&w=985&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="400" height="500" layout="responsive"></amp-img> </amp-base-carousel>

nothing to worry, the code is huge because of the image link, it is just amp-base-carousel with three amp-img src
If image does not open, try with different image link you can find online

Notice how on sliding to next image after first changes the dimension on left right side.

Relevant Logs

Browser(s) Affected

Edge

OS(s) Affected

No response

Device(s) Affected

all devices show same behaviour

AMP Version Affected

No response

[AyushTyagi2]

Hello, I'd like to work on this.

[prowessclust]

Yeah go for it @AyushTyagi2

[AyushTyagi2]

@prowessclust I've corrected this issue. How should I get this merged with the main code? or if you need any demo. Please let me know

[prowessclust]

@AyushTyagi2 , you need to create a pull request, before that make sure you did your changes by creating a new branch ( don't work on main directly ) then create a PR and mention it that this PR is closing issue no #40374. Show a demo image for clarification.

[AyushTyagi2]

@prowessclust where should I put it, in which directory? Please direct me to the required folder.

[AyushTyagi2]

https://github.com/user-attachments/assets/c0b89482-e8a9-4caf-a57a-f6acd3880af5
I've attached this video as a testament

[prowessclust]

Here, you go @AyushTyagi2

1. go here extensions\amp-carousel\0.1\amp-carousel.css
2. In that , you need to change it here

.amp-carousel-slide > .i-amphtml-replaced-content {
  /*
   * Apply contain object-fit to all replaced content to avoid distorted ratios.
   */
  object-fit: contain;
}

Here, change it to require and run it first in your system to check if works fine before pulling request.