Ola, tudo bem? Gente, estou com uma duvida! Estou fazendo um carrossel, e estou usando uma tecnologia nova, o AMP. Porém isso não implica para o problema.
O que eu quero fazer, é conectar as imagens do carrossel a uma lista que funciona como as setas de um carrossel, de acordo com o usuário clica nos números abaixo do carrossel, ele navega entre o slide.
O meu carrossel está assim:
amp-carousel class="carousel1" layout="responsive" height="230" width="200" type="slides">
<div class="slide">
<amp-img src="/maca" layout="responsive" width="540" height="396" alt="imagem maça" class="imageone"></amp-img>
<amp-fit-text layout="responsive" width="500" height="150">
<h3 style="font-family: 'ItauDisplay-XBold', 'Myriad Pro', Arial; text-align: center;"> Passo 1</h3>
<p style="text-align: center;">Quais os benefícios da maça?</p>
</amp-fit-text>
</div>
<div class="slide">
<amp-img src="banana" layout="responsive" width="540" height="396" alt="banana"></amp-img>
<amp-fit-text layout="responsive" width="500" height="150">
<h3 style="font-family: 'ItauDisplay-XBold', 'Myriad Pro', Arial; text-align: center;"> Passo 2</h3>
<p style="text-align: center;">Quais os beneficios da banana</p>
</amp-fit-text>
</div>E ai criei uma lista abaixo dele para capturar os elementos e ter a navegação.
<ul class="listadenumeros" style="margin-top: 5px;">
<li class="active">
<a href="" role="button" data-index="1" class="numberlist" aria-label="Ir para página 1">
<div class="number1">01</div>
<div class="timeline"><span class="timeline-track" style="width: 20%;"></span></div>
</a>
</li>
<li>
<a href="" role="button" data-index="2" class="numberlist" aria-label="Ir para página 2">
<div class="numer2">02</div>
<div class="timeline"><span class="timeline-track" style="width: 40%;"></span></div>
</a>
</li>
</ul>Como eu conecto o carrossel na minha lista? Não estou sabendo fazer isso. Vi algo com onscroll mas não sei fazer.
Alguém pode me ajudar?
OBS: Não posso usar JS.
