Estou trabalhando em um template para anúncio carousel de três slides, usando o modelo de carousel do projeto AMP. Disponibilizei o meu template aqui.
Dentre as premissas do projeto, existem duas que são obrigatórias:
O segundo slide do carousel tem que ficar parcialmente visível no canto direito, quando exibido o primeiro slide (para despertar a curiosidade do usuário que ver o anúncio).
Na versão de desktop, ao usar os botões 'next' e 'prev', o carousel deve avançar para o centro da próxima imagem, ou da imagem anterior.
O problema que encontrei, foi que o type="carousel"
me permite exibir parcialmente o próximo slide, mas quando clico no botão, ele não avança o scroll para o centro do próximo slide.
E quando uso o type="slides"
, o scroll avança corretamente para o próximo slide, mas não me permite exibir parte do próximo slide.
Estou em busca de uma solução para que consiga atingir essas duas premissas. Neste link está a documentação do amp-carousel.
Esse é o HTML do item carousel:
<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>