I'm working on a three-slide carousel template, using the carousel template from the AMP project. I have made available my template here .
Among the project's premises, there are two that are mandatory:
The second carousel slide has to be partially visible in the right corner when the first slide is displayed (to arouse the user's curiosity to see the ad).
In the desktop version, when using the 'next' and 'prev' buttons, the carousel should move to the center of the next image, or the previous image.
The problem I found was that type="carousel" allows me to partially display the next slide, but when I click the button it does not advance the scroll to the center of the next slide.
And when I use type="slides" , scrolling advances correctly to the next slide, but does not allow me to display part of the next slide.
I am looking for a solution to achieve these two premises. Here is the amp-carousel documentation.
This is the HTML of the carousel item:
<amp-carousel height="245" layout="fixed-height" type="carousel">
<div class="slide" id="slide1" style="margin-left: 20px">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>São 100 carros todos os dias</p></div>
<div style="float:left;margin-top: 10px">
<a href="http://www.google.com.br" target="_blank">Participe</a>
</div>
</div>
</div>
<div class="slide" id="slide2">
<img height="170" width="200" src="slide1.png"/>
<div>
<div class="cta" style="float:left"><p>Se ligar, é seu!</p></div>
<div style="float:left;margin-top: 10px">
<a href="http://www.google.com.br" target="_blank">Participe</a>
</div>
</div>
</div>
<div class="slide" id="slide3">
<img height="170" width="200" src="slide0.png"/>
<div>
<div class="cta" style="float:left"><p>Faça o teste drive.</p></div>
<div style="float:left;margin-top: 10px">
<a href="http://www.google.com.br" target="_blank">Participe</a>
</div>
</div>
</div>