Реализовать слайд-шоу / карусель только для CSS с помощью кнопок «Далее» и «Предыдущий»?
В течение некоторого времени, время от времени, я пытался реализовать слайд-шоу только для 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>