Scroll length custom ad

Question

I’m working on a three-slide Carousel ad template, using the AMP project’s Carousel template. I made my template available here.

Among the project’s premises, there are two that are mandatory:

1. The second slide of Carousel has to be partially visible in the right corner when the first slide is displayed (to arouse the curiosity of the user who sees the ad).

2. In the desktop version, when using the 'next' and 'Prev' buttons, Carousel should move to the center of the next image, or the previous image.

The problem I found was that the type="carousel" allows me to partially display the next slide, but when I click the button, it doesn’t advance the scroll to the center of the next slide.

And when I use the type="slides", the scroll 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. At this link 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" 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" 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" target="_blank">Participe</a>
                </div>
        </div>
    </div>