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>

questionAnswers(1)

yourAnswerToTheQuestion