Не прокручивается вертикальный скролл?

Для того, чтобы слайдер отображался корректно, использую overflow: hidden у body, но при этом, естественно, возможность вертикального скроллинга пропадает, а она нужна. Когда использую overflow-x: hidden, вертикальный скролл появляется, но не прокручивается. Как сделать возможным прокрутку страницы по вертикали и при этом, чтобы слайдер выглядел корректно?

HTML:
<div class="slider">
            <input type="radio" id="trigger1" name="slider" checked>
            <label for="trigger1"></label>
            <div class="slide bg1"></div>

            <input type="radio" id="trigger2" name="slider">
            <label for="trigger2"></label>
            <div class="slide bg2"></div>

            <input type="radio" id="trigger3" name="slider">
            <label for="trigger3"></label>
            <div class="slide bg3"></div>
        </div>


CSS:
.slider {
	padding: 0px;
	margin: 0;
	height: 65%;
	text-align: center;
    overflow: hidden;
  }
  
  input {
	position: absolute;  
	opacity: 0;
	cursor: pointer;
  }
  
  label {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: solid 2px white;
	border-radius: 999px;
	background-color: transparent;
	margin: 63vh 6px 0 6px;
	z-index: 2;
	cursor: pointer;
	transition-duration: .4s;
  }
  
  input:checked + label{
	background-color: white;
  }
  
  .slide {
/*    max-width: 960px;  */
	position: absolute;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 50%;
	top: 153px;
	left: 0;
	z-index: -1;
	transform: translateX(-100%);
	transition-duration: .4s;
	opacity: 1;
}
  
  input:checked ~ .slide {
	transform: translateX(100%);
  }
  
  input:checked + label + .slide {
	transform: translateX(0);
	opacity: 1;
  }
  
  .bg1{
	background-image: url('../images/slide_img_1.jpg');
  }
  .bg2{
	background-image: url('../images/slide_img_2.jpg');
  }
  .bg3{
	background-image: url('../images/slide_img_3.jpg');
  }

.novelty {
    padding-top: 100px;
    padding-left: 9em;
}

.novelty h1, h2{
    display: flex;
    color: white;
}

.novelty h2{
    padding-top: 35px;
    font-size: .8em;
    text-align: left;
}

#add {
    display: flex;
    margin-top: 3em;
    padding: 13px 45px 13px 45px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    font-weight: 500;
    color: #FC6930;
    background-color: white;
    border-radius: 3px;
    cursor: pointer;
}


На кучу overflow в CSS не обращайте внимания, это я разные варианты пробовал, но ничего не меняется. Только когда применяется к body.
  • Вопрос задан
  • 838 просмотров
Решения вопроса 1
Brad9aga
@Brad9aga
я сообразил твой косяк
у слайдера relative не прописан.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@xonar
А смысл?
Как я знаю, то никак. Но, можно сделать иначе. Блок со слайдером у которого есть вертикальная прокрутка(задаём вертикальную прокрутку), так же содержимое слайдера поворачиваем. В итоге мы получим горизонтальную прокрутку
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы