В течение некоторого времени, время от времени, я пытался реализовать слайд-шоу только для CSS, которое будет:

Предлагайте прямую и обратную навигацию.Не изменять историю навигации.Привить четкое направление движения контента.Работайте в максимально возможном количестве браузеров.

Большинство других слайд-шоу CSS, с которыми я сталкивался, не отметили все эти флажки.

К счастью, это заняло у меня так много времени, что сами браузеры безвозвратно улучшились до такой степени, что теперь это на самом деле довольно широко возможно, хотя и с несколькими «современными» CSS-измами. На всякий случай, если это пригодится кому-то еще, я решил опубликовать это здесь.

Так как же создать слайд-шоу с навигацией, используя только CSS и следующую разметку?

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