Search code examples
htmlcsstemplatesamp-html

amp-carousel has a misplaced next and previous image arrows

i am using a template from AMP Start. i have used the amp-carousel. the arrow images for next image and previous image buttons are on top of the screen and are not visible. how can i fix this? image one image two

Solution

  • Do following things : 

    .amp-carousel-button .amp-carousel-button-prev {
  position: absolute;
  top: 50%;
  left: 0;
}
.amp-carousel-button .amp-carousel-button-next {
  position: absolute;
  top: 50%;
  right: 0;
}

    or else replace default indicators to custom indicators using following link : https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md