Задать вопрос
@nelicepriatniy

Как отменить заданную высоту в swiper?

Сделал полноэкранный вертикальный слайдер с помощью 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,
});
  • Вопрос задан
  • 665 просмотров
Подписаться 1 Средний 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

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