Galeria de fotos Modal

Olá, boa noite. Queria fazer uma galeria, consegui fazer uma modal, só queria colocar seta pra esquerda para ir à foto anterior e para à esquerda, indicando a próxima foto, como posso fazer isso deixando responsívo? Algo como » e « (o código é um pouco grande kkk)

index.html (10,2 KB)

Dá uma olhada nesse link abaixo, eles tem um exemplo bem detalhado com três passos.
How TO - Lightbox (Modal Image Gallery)

Já vi na w3, só queria colocar as setas, mas colocando ela escapa da tela, não fica ‘responsíva’ :frowning:

Entendi!
Basta criar uma <div> e setar o position: absolute;, dentro da div tu crias dois <span>, problema resolvido, agora é só usar CSS. Por exemplo:

No HTML:

<div id="setas">
   <span class="arrow esquerda">«</span>
   <span class="arrow direita">»</span>	
</div>

No CSS:

#setas{width: 100%; height:50px; position:absolute; top:50%; margin-top:-25px; display:inline-block; z-index:9999;}
#setas .arrow{ width: 30px; height: 100%; position: relative; background: red; font-size: 30px; cursor: pointer; display:inline-block; text-align:center;}
#setas .arrow.esquerda{left:0; border-radius: 0 10px 10px 0;}
#setas .arrow.direita{float:right; right:0; border-radius: 10px 0 0 10px;}

FIM:

Agora é só usar JavaScript e capturar os eventos e executar as ações.

só colocar um slider