Я использовал Swiper JS для слайда целых полноэкранных секций, но столкнулся с проблемой: содержимое в Swiper не хочет растягиваться на всю высоту секции, так как у меня для section стоит правило padding: 80px 0, можно было бы убрать это правило, но тогда все будет выглядеть не так как мне нужно . Как сделать так, чтобы слайдер растягивался на всю высоту секции .services и контент при этом никуда не уплывал. PS я сделал фон зеленым специально, чтобы было видны отступы и чтобы перейти к следующему слайду надо нажать "Узнать подробнее"
Сам сайт ca50234.tmweb.ru
Весь код jsfiddle.net/u3vp4rto/
.services {
background-color: green;
}
.services .swiper-container {
width: 100%;
height: 100%;
}
.services .swiper-wrapper {
padding: -80px 0 !important;
}
/*first-slider*/
.services-first-slider {
background: url(../img/services-bg.jpg) center no-repeat;
background-size: contain;
background-position: right;
position: relative;
}
.services-bg {
background: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.sidebar {
max-width: 617px;
width: 100%;
height: 100vh;
background-color: #090F14;
margin-left: -120px;
margin-top: -30px;
padding-top: 120px;
z-index: 99;
}
.sidebar h3 {
padding-left: 120px;
font-size: 50px;
color: #fff;
font-family: 'Noto Serif', serif;
font-weight: 500;
margin-bottom: 100px;
}
.sidebar-menu {
display: flex;
flex-direction: column;
padding-left: 120px;
box-sizing: border-box;
list-style: none !important;
}
.sidebar-menu li {
margin-bottom: 40px;
list-style-type: none !important;
transition: 0.5s;
}
.sidebar-menu li a {
font-size: 18px;
color: #777777;
list-style-type: none !important;
transition: 0.3s;
}
.sidebar-menu li a:hover {
color: #fff;
}
.big {
transform: scale(1.5) translateX(16.5%);
color: #fff;
}
.sidebar-menu li.big a {
color: #FFFFFF;
}
.sidebar-nav {
display: flex;
justify-content: flex-start;
margin-left: 120px;
}
.sidebar-nav li {
width: 7px;
height: 7px;
border: 1px solid #fff;
border-radius: 50px;
margin-right: 5px;
cursor: pointer;
}
.actived {
background-color: #fff;
transition: 0.3s;
}
.services-info {
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
margin: 0 auto;
line-height: 1.5;
position: relative;
}
.services-info .content {
display: flex;
flex-direction: column;
max-width: 664px;
width: 100%;
}
.services-info-title {
font-size: 26px;
font-weight: 400;
}
.services-info p {
font-size: 18px;
margin-bottom: 40px;
}
.services-first-slider .wrapper .content {
display: flex;
}
.services-info-title {
margin-bottom: 50px;
}
.services-info-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.services-info-block {
display: flex;
justify-content: space-between;
font-size: 15px;
margin-bottom: 100px;
}
.services-info-footer a.order:hover {
background-color: #fff;
color: #000;
}
.services-info-footer a.order {
border: 3px solid #FFFFFF;
color: #fff;
padding: 10px 40px;
transition: 0.3s;
font-size: 27px;
font-weight: 700;
font-family: 'Noto Sans Thai', sans-serif;
}
.services-info-footer .details {
font-family: 'Noto Sans Thai', sans-serif;
font-size: 22px;
color: #fff;
transition: 0.3s;
}
.services-info-footer .details:hover {
font-size: 26px;
}
.invisible {
display: none;
}
.visible {
display: block;
}
/*second slider*/
.services-second-slider,
.services-third-slider {
background: url(../img/services-bg.jpg) center no-repeat;
background-size: contain;
background-position: left;
color: #fff;
}
.services-second-slider .wrapper .content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
}
.services-second-slider .title {
text-align: center;
color: #fff;
font-size: 52px;
width: 100%;
padding-top: 120px;
font-family: 'Noto Serif', serif;
margin-bottom: 180px;
}
.services-second-slider .big-block {
display: flex;
justify-content: space-between;
}
.services-second-slider .block {
width: 50%;
}
.services-second-slider .desc.block .text {
font-size: 18px;
max-width: 577px;
width: 100%;
line-height: 1.6;
margin-bottom: 143px;
}
.services-second-slider .order {
border: 3px solid #FFFFFF;
color: #fff;
padding: 10px 40px;
transition: 0.3s;
font-size: 27px;
font-weight: 700;
font-family: 'Noto Sans Thai', sans-serif;
}
.services-second-slider .order:hover {
background-color: #fff;
color: #000;
}
.services-second-slider .advantages h4 {
font-size: 27px;
font-weight: 600;
margin-bottom: 75px;
}
.services-second-slider .advantages {
margin-top: -100px;
}
.services-second-slider .adv-show-block {
display: flex;
justify-content: space-between;
}
.wallet,
.team {
margin-bottom: 75px;
}
.wallet img,
.accessible img,
.team img,
.fast img {
margin-bottom: 10px;
}
.services-second-slider .first-block span,
.services-second-slider .second-block span {
max-width: 319px;
width: 100%;
font-size: 19px;
line-height: 1.3;
}
.wallet,
.accessible,
.team,
.fast {
display: flex;
flex-direction: column;
align-items: center;
}
.services-second-slider .second-block {
margin-right: 100px;
}
.services-second-slider .footer-block {
display: flex;
justify-content: space-between;
}
.services-second-slider .back,
.services-second-slider .work-expl {
display: flex;
align-items: center;
color: #fff;
font-family: 'Noto Sans Thai', sans-serif;
font-size: 15px;
}
.services-second-slider span.text-back,
.services-second-slider span.text-next {
transition: 0.3s;
}
.back:hover span.text-back {
font-size: 22px;
border-bottom: 1px solid #fff;
}
.work-expl:hover span.text-next {
font-size: 22px;
border-bottom: 1px solid #fff;
}
.services-second-slider .arrow {
font-size: 30px;
}
.services-second-slider .arrow.left {
margin-right: 20px;
}
.services-second-slider .arrow.right {
margin-left: 20px;
}
/*third slider*/
.services-third-slider .wrapper .content {
display: flex;
flex-direction: column;
/*justify-content: space-between;*/
height: 100%;
width: 100%;
}
.services-third-slider .title {
font-weight: 600;
font-size: 55px;
text-align: center;
color: #fff;
width: 100%;
padding-top: 120px;
margin-bottom: 120px;
}
.services-third-slider .swiper-container {
width: 890px;
}
.sequence {
background-color: red;
}
.services-third-slider .back {
display: flex;
align-items: center;
color: #fff;
font-family: 'Noto Sans Thai', sans-serif;
font-size: 15px;
transition: 0.3s;
}
.services-third-slider .back:hover .services-third-slider .arrow.left {
margin-right: 20px;
}
<section class="services" id="services">
<div class="swiper-container services-slider">
<div class="swiper-wrapper">
<div class="swiper-slide services-first-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="sidebar">
<h3>Наши услуги</h3>
<ul class="sidebar-menu">
<li id="business-card"><a href="#">Сайт-визитка</a></li>
<li id="landing"><a href="#">Landing page</a></li>
<li id="market"><a href="#">Интернет-магазин</a></li>
<li id="corp"><a href="#">Корпоративный сайт</a></li>
<li id="bitrix"><a href="#">1C Битрикс</a></li>
<li id="advertising"><a href="#">Контекстная реклама</a></li>
<li id="seo"><a href="#">SEO оптимизация</a></li>
<li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
<li id="marketing"><a href="#">Контент-маркетинг</a></li>
</ul>
<ul class="sidebar-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="services-info">
<div class="content">
<div class="business-card">Сайт-визитка</div>
<div class="landing invisible">Landing page</div>
<div class="market invisible">
<div class="services-info-title">
Созданные экспертами «Inter-web» сайты интернет-магазинов имеют функциональность, необходимую для успешной онлайн-торговли.
</div>
<p>Что входит в нашу работу:</p>
<div class="services-info-block">
<ul>
<li>+ Подготовка технического задания</li>
<li>+ Разработка прототипа</li>
<li>+ Верстка макета</li>
<li>+ Интеграция дизайна</li>
</ul>
<ul>
<li>+ Написание уникальных текстов</li>
<li>+ Сбор семантики</li>
<li>+ Тестирование и запуск</li>
<li>+ Подключение веб-аналитики</li>
</ul>
</div>
<div class="services-info-footer">
<a class="order" href="#">Сделать заказ</a>
<a href="#" class="details next">Узнать подробнее →</a>
</div>
</div>
<div class="corp invisible">Корпоративный сайт</div>
<div class="bitrix invisible">1C Битрикс</div>
<div class="advertising invisible">Контекстная реклама</div>
<div class="seo invisible">SEO оптимизация</div>
<div class="promotion invisible">Продвижение в соц. сетях</div>
<div class="marketing invisible">Контент-маркетинг</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide services-second-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="title">Интернет-магазин под ключ</div>
<div class="big-block">
<div class="desc block">
<div class="text">
Интернет-магазин – прекрасный способ организовать эффективные продажи через интернет. Функционал сайта регулярно дорабатывается и совершенствуется. Бизнес, основная цель которого, получение прибыли путём продажи товаров и услуг, нуждается в качественной работе профессионалов.
</div>
<a class="order" href="#">Сделать заказ</a>
</div>
<div class="advantages block">
<h4>Преимущества использования Интернет-магазина</h4>
<div class="adv-show-block ">
<div class="first-block">
<div class="wallet">
<img src="img/wallet.svg" alt="wallet">
<span>Для поддержания работы интернет-магазина требуется только оплата домена и хостинга</span>
</div>
<div class="accessible">
<img src="img/accessible.svg" alt="accessible">
<span>Ваш магазин будет доступен покупателем 24 часа в сутки – 7 дней в неделю</span>
</div>
</div>
<div class="second-block">
<div class="team">
<img src="img/team.svg" alt="team">
<span>Владелец интернет-магазина получает доступ к огромной аудитории</span>
</div>
<div class="fast">
<img src="img/fast.svg" alt="fast">
<span>Команда хороших исполнителей способна запустить работающий онлайн-магазин за короткий срок</span>
</div>
</div>
</div>
</div>
</div>
<div class="footer-block">
<a href="#" class="back"><span class="arrow left">←</span>
<span class="text-back">Вернуться назад</span></a>
<a href="#" class="work-expl next"><span class="text-next">Примеры работ</span><span class="arrow right">→</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide services-third-slider">
<div class="services-bg">
<div class="wrapper">
<div class="content">
<div class="title">Примеры работ</div>
<div class="swiper-container example-gal">
<div class=" swiper-wrapper">
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
<div class="swiper-slide">
<img src="img/example.jpg" alt="example">
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="footer-block">
<a href="#" class="back"><span class="arrow left">←</span>
<span class="text-back">Вернуться назад</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>