Entrar Ainda não tem acesso?
6
respostas

ME AJUDEM PF - Botão “anterior” e “próximo” no carrossel sem JS

por Andreia Leticia Amorim Silva
| 26.7k xp | 6 posts

Boa tarde, gostaria de saber se existe como fazer um botão de anterior e próximo em um carrossel usando somente CSS e Html.

Este é meu carrossel. Estou usando uma tecnologia chamada AMP. Porém o carrossel funciona igualmente um carrossel normal.

<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>
<amp-carousel >

E criei um link assim: 

<div class="previous_next_link" style="font-size: 14px; color:#007AB7; font-weight: light;text-align: center;">
                <a style="margin-right: 15px;" href="">anterior</a>
                <a style="margin-right: 30px;" href="">proximo</a>
            </div>

Como eu consigo conectar o carrossel, para ele passar entre slides de acordo com o clique de "próximo" e "anterior"????

Pfv me ajudem.

6 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Andreia, tudo bem? Acho que o AMP Carousel já tem seus próprios botões de próximo (seta para direita) e anterior (seta para esquerda), sendo assim, você não precisaria realizar a implementação dos mesmos.

https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fcomponents%2Famp-carousel.example.1.html%3Fformat%3Dwebsites&format=websites&_gl=1*mid4v1*_ga*YW1wLUxLcGxLS2RTMFhlcnJlcDhVcktGeGc.

Repare nesse exemplo o funcionamento dos mesmos.

Espero ter ajudado.

por Andreia Leticia Amorim Silva
| 26.7k xp | 6 posts

@Matheus Castiglioni tudo bem?

Então, eu não queria usar as "setas" como transição do carrossel. Queria utilizar esse próximo e anterior. Porém não sei conectar ele no carrossel! :( Poderia me ajudar?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Andreia, eu nunca isei essa lib, mas, olhando na doc parece existir uma função chamada goToSlide onde você informar o index do slide para o qual pretender navegar.

Acho que pode ser o que você está procurando.

https://amp.dev/documentation/components/amp-carousel/#gotoslide(index=integer)

Espero ter ajudado.

por Andreia Leticia Amorim Silva
| 26.7k xp | 6 posts

Oie Matheus! Então no caso eu não gostaria de usar essa lib do AMP. Queria montar os links separadamente, como se fosse um HTML normal.

A minha ideia é utilizar os links de "anterior e próximo" para navegar pelo carrossel acima.

O problema é que não sei conectar uma coisa ou outra e nem usar o JS para isso, mas preciso de um help urgente, pois preciso ter uma resolução.

Poderia me mostrar como faz?

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala Andreia, compartilha o projeto completo comigo, assim eu consigo dar uma olhada nele com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo e desculpa a demora para responder, as coisas estão bem corridas por aqui.

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Opa Andreia beleza?

Creio que seja isto que está procurando https://www.youtube.com/watch?v=1CZhGDU5cWM