Implementar uma apresentação de slides / carrossel somente CSS com os botões seguinte e anterior?
Há algum tempo, de vez em quando, estou tentando implementar uma apresentação de slides apenas com CSS, que faria:
Ofereça navegação para frente e para trás.Não modifique o histórico de navegação.Instale uma direção distinta ao movimento do conteúdo.Trabalhe no maior número possível de navegadores.A maioria das outras apresentações de slides em CSS que encontrei não marcou todas essas caixas.
Felizmente, demorei tanto tempo que os próprios navegadores melhoraram sem parar, a ponto de agora ser realmente amplamente possível, embora com alguns ismos CSS "modernos". Apenas para o caso de ser útil para qualquer outra pessoa, pensei em publicá-la aqui.
Então, como você pode criar uma apresentação de slides navegável, usando apenas CSS e a seguinte marcação?
<ul class="css-slider">
<li class="slide"><img src="photos/a.jpg" /></li>
<li class="slide"><img src="photos/b.jpg" /></li>
<li class="slide"><img src="photos/c.jpg" /></li>
<li class="slide"><img src="photos/d.jpg" /></li>
<li class="slide"><img src="photos/e.jpg" /></li>
</ul>