Галерея на :target без скриптов: переключаем активный слайд якорём

Схема селектора

Миниатюры ссылками ставят якорь; элемент с совпадающим id становится активным через li:target. Иллюстрации в этом пересказе опущены, но блок разметки оставлен пустышками там, где обычно стоят изображения — так проще дополнить свой медиастек.

<div class="cssSlider">
	<ul class="slides">
 <li id="slide1"></li>
 <li id="slide2"></li>
 <li id="slide3"></li>
 <li id="slide4"></li>
 <li id="slide5"></li>
	</ul>
	<ul class="thumbnails">
 <li><a href="#slide1"></a></li>
 <li><a href="#slide2"></a></li>
 <li><a href="#slide3"></a></li>
 <li><a href="#slide4"></a></li>
 <li><a href="#slide5"></a></li>
	</ul>
</div>

Разбор задачи

Возможности CSS с каждым разом удивляют все сильнее! На этот раз покажем вам как сделать простую галерею на CSS без использования JavaScript.

Для этого воспользуемся селектором :target, который указывает на то, элемент с каким ID сейчас должен быть активен.

.cssSlider {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cssSlider .slides {
	overflow: hidden;
	overflow: hidden;
	width: 100%;
	height: 70vmin;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cssSlider .slides > li {
	width: 100%;
	height: 70vmin;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}
.cssSlider .slides > li > img {
	width: 100%;
	height: auto;
}
/*
.cssSlider .slides > li:first-child:not(:target) {
	z-index: 1;
	-webkit-transform: translateY(0%);
	        transform: translateY(0%);
}
*/
.cssSlider .thumbnails {
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
	list-style: none;
}
.cssSlider .thumbnails > li {
	float: left;
	width: 20%;
}
.cssSlider .thumbnails > li > a {
	display: block;
}
.cssSlider .thumbnails > li > a > img {
	width: 100%;
	height: auto;
}

.cssSlider .slides li:target {
	z-index: 3;
	-webkit-animation: slide 1s 1;
}
.cssSlider .slides li:not(:target) {
	-webkit-animation: hidden 1s 1;
}
@-webkit-keyframes slide {
	0% {
 -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
	}
	100% {
 -webkit-transform: translateX(0%);
         transform: translateX(0%);
	}
}
@keyframes slide {
	0% {
 -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
	}
	100% {
 -webkit-transform: translateX(0%);
         transform: translateX(0%);
	}
}
@-webkit-keyframes hidden {
	0% {
 z-index: 2;
 -webkit-transform: translateX(0%);
         transform: translateX(0%);
	}
	100% {
 z-index: 2;
 -webkit-transform: translateX(100%);
         transform: translateX(100%);
	}
}
@keyframes hidden {
	0% {
 z-index: 2;
 -webkit-transform: translateX(0%);
         transform: translateX(0%);
	}
	100% {
 z-index: 2;
 -webkit-transform: translateX(100%);
         transform: translateX(100%);
	}
}

Замечания перед выкладкой

Правки через контролируемую среду и с версионированием. Для статей-бэкенда проверяйте включённые модули и права; для чистых CSS-сниппетов — консоль браузера и отсутствие конфликтов с утилитарными классами основного шаблона проекта на Битрикс.