Как сделать вертикальный слайдер на чистом CSS?

Question

[JohnDoe116]

В хедере блога хочу поставить слайдер с вертикальным переключением слайдов по нажатию на чекбокс(чекбокс сделал не пронумерованным списком). На флотах горизонтальный знаю как, но вертикальный почему то не получается.

Comments

[JohnDoe116]

BD_ l3ftoverZ!, да ничего ещё нету, я спросил тех кто уже имел опыт подобной реализации.

Answer 1

[Александр Алексеев]

копайте в сторону input type radio и селектора +
флексы можно сделать и вертикально flex-direction: column

Comments

[JohnDoe116]

Что я делаю не так?Картинки расширяют высоту контейнера хотя должны выходить за него выше и скрываться свойством oveflow

<div class="slider">
					<input id="btn-1" type="radio" name="toggle">
					<input id="btn-2" type="radio" name="toggle" checked>
					<input id="btn-3" type="radio" name="toggle">
					<div class="slider-controls">
						<label for="btn-1"></label>
						<label for="btn-2"></label>
						<label for="btn-3"></label>
						<span>featured article</span>
					</div>
					<div class="slider-inner">
						<div class="slider-slides">
							<img src="img/second-slide.jpg" width="1530" height="580" alt="abs">
							<img src="img/main-slide.jpg" width="1530" height="580" alt="bodybuilder">
							<img src="img/third-slide.jpg" width="1530" height="580" alt="girl">
						</div>
						<div class="hm-promo">
							<p>Latest news</p>
							<h1>BodyBuilding best<br>for you health</h1>
						</div>
					</div>
				</div>

.slider {
	position: relative;
}

.slider input {
	display: none;
}

.slider span {
	position: absolute;
	top: 53%;
	right: -200px;
	transform-origin: 0 0;
	transform: rotate(-90deg);
	white-space: nowrap;
	text-indent: -50px;
	font-size: 14px;
}

.slider-inner {
	overflow: hidden;
}

.slider-controls {
	position: absolute;
	top: 55%;
	right: 110px;
	vertical-align: center;
}


#btn-1:checked ~ .slider-controls label[for="btn-1"],
#btn-2:checked ~ .slider-controls label[for="btn-2"],
#btn-3:checked ~ .slider-controls label[for="btn-3"] {
	background-color: #fff;
}

#btn-1:checked ~.slider-inner .slider-slides {
	transform: translateY(0px);
}

#btn-2:checked ~.slider-inner .slider-slides {
	transform: translateY(-580px);
}

#btn-3:checked ~.slider-inner .slider-slides {
	transform: translateY(-1160px) ;
}

.slider-slides {
        display: flex;
	flex-direction: column;
	height: 300%;
	transition: transform ease;
}

.slider-controls label {
	position: relative;
	display: block;
	top: -50px;
	left: 35px;
	margin-top: 10px;
	width: 6px;
	height: 6px;
	border: 1px solid #fff;
}

.slider img {
	width: 100%;
	padding: 0;
	margin: 0;
	object-fit: cover;
}

[Александр Алексеев]

лень вникать в код
если кратко
.slider_wrap - фиксированная высота + overflow: hidden'
.slider_list - высота в процентах по кол-ву слайдов например 300% для 3х + flex-direction-column + position: absolute
перед слайдером ставим 3 радиокнопки
.radio1:checked ~ .slider_wrap .slider_list { начальное состояние }
.radio2:checked ~ .slider_wrap .slider_list { сдвигаем transform на один слайд ввех }
.radio3:checked ~ .slider_wrap .slider_list { сдвигаем transform на два слайда ввех }

[JohnDoe116]

уже решил просидев 6 часов над проблемой, да решение именно такое как вы написали, но overflow сработало только для внешней оболочки всего хедера(в него вложен слайдер с импутами и лейблами), но почему то не сработало на контейнер изображений самого слайдера).