Сделал полноэкранный вертикальный слайдер с помощью swiper, последний слайд должен прокручиваться, организовал это с помощью слайдера внутри с free mod, проблема в том что слайд наследует высоту от слайдера и принимает высоту в 100vh, как убрать наследование высоты, или организовать скролл внутри слайда другим способом?
демо можно посмотреть тут:
<a href='https://nelicepriatniy.github.io/demo/'></a>
код, как организован последний слайд и его настройки:
<div class="swiper-slide form">
<div class="sliderForm">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide form-slide" style="height: auto;">
<div class="content-slide">
<div class="container">
<h1>Заполнте заявку на сотрудничество</h1>
</div>
<form action="">
<label for="tel">Ваш телефон*</label>
<input type="tel" id="tel" placeholder="+7 (999) 999-99-99">
<label for="name">ФИО*</label>
<input type="text" id="name" placeholder="Иванов Иван Иванович">
<label for="email">e-mail*</label>
<input type="email" id="email" placeholder="Ivanivanov@mail.ru">
<label for="adres">Укажите адрес вашего салона</label>
<input type="text" id="adres" placeholder="проспект юности д.58">
<label for="comment">Коментарий</label>
<textarea name="" id="comment" placeholder="Введите сообщение, которое
увидит наш менеджер"></textarea>
<button type="submit">Отравить заявку</button>
</form>
</div>
</div>
<!-- <div class="swiper-slide last">Slide 2</div> -->
</div>
</div>
<img src="./meida/formBg.png" alt="" class="form__bg">
</div>
</div>
.swiper .form {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
display: block;
}
.swiper .form .sliderForm {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
}
.swiper .form .sliderForm .form-slide {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
}
.swiper .form .last {
height: 1px;
}
.swiper .form .form__bg {
position: absolute;
right: 50px;
top: 0;
z-index: -1;
}
.swiper .form h1 {
margin-top: 24px;
width: 100%;
text-align: center;
font-family: "GilroyS";
font-size: 36px;
}
.swiper .form form {
width: 657px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
}
.swiper .form form label {
font-size: 27px;
line-height: 32px;
letter-spacing: 0.245em;
font-family: "GilroyR";
width: 100%;
}
.swiper .form form input, .swiper .form form textarea {
padding: 25px 22px;
background: none;
border: 4px solid #8E8D8B;
border-radius: 2px;
font-family: "GilroyS";
width: 100%;
}
.swiper .form form textarea {
height: 150px;
margin-bottom: 20px;
}
.swiper .form form button {
border: 3px solid #000000;
border-radius: 5px;
background: none;
font-family: "GilroyR";
padding: 23px 46px;
width: 50%;
margin-left: 50%;
}
new Swiper('.swiper', {
mousewheel: {
},
direction: 'vertical',
speed: 800,
slidesPerView: 'auto',
});
new Swiper('.sliderForm', {
mousewheel: {
},
freeMode: true,
nested: true,
direction: 'vertical',
height: null,
});
