2

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:

  1. 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).

  2. 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>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .