Как связать слайдер + ссылку с адаптивным скроллом под ней?

Question

oksana_melikhova @oksana_melikhova

Как связать слайдер + ссылку с адаптивным скроллом под ней?

Имеется такой блок

Я пробовала сверстать два слайдера и связать их друг с другом, но именно адаптивного скролла под ссылкой, по размеру текста, добиться так и не смогла
А сейчас, вообще, скролл "уехал" вниз страницы. Как можно решить это?
Код сократила, т.к. слайдеры однотипные

<section class="info">
			<div class="container">
				<h2 class="info-title">
					Рекомендуемые <br> варианты отопления
				</h2>
				<p class="info-subtitle">Если у Вас в доме уже уложен пол, то потребуется его снять</p>
				<div class="info-row">
					<a href="#!" class="info-row__link">Балконы и лоджии</a>
					<a href="#!" class="info-row__link">Бани</a>
					<a href="#!" class="info-row__link">Дачи</a>
					<a href="#!" class="info-row__link">Загородная недвижимость</a>
					<a href="#!" class="info-row__link">Комерческие объекты</a>
					<a href="#!" class="info-row__link">Прочие</a>
				</div>
			</div>
				<div class="info-slider__scrollbar swiper-scrollbar container"></div>
				<div class="info-slider swiper-container">
					<div class="info-slider__prev swiper-button-prev"></div>
					<div class="info-slider__next swiper-button-next"></div>
					<div class="info-slider__wrapper swiper-wrapper">
						<div class="info-slider__item swiper-slide">
							<div class="info-slider__img">
								<img src="./img/info-slider5.jpg" alt="картинка">
							</div>
							<div class="info-slider__inner container">
							<h4 class="info-slider__title">О проекте</h4>
							<p class="info-slider__subtitle">Mauris et ornare nibh, sed dictum leo. Sed gravida accumsan nisi, sed malesuada quam egestas vel. Mauris finibus magna a metus elementum ornare. Sed id mi ac purus efficitur mattis non eu erat. Nulla pellentesque euismod mi nec pharetra. Mauris auctor maximus lacus, eu laoreet enim suscipit ac. Sed accumsan quam nec nisi fermentum aliquam. Aliquam erat volutpat. Nullam nec nisi lacus. Sed ornare molestie tellus, ut auctor augue malesuada quis. Etiam felis elit, aliquam vitae fermentum vitae, dapibus a lectus. Etiam porttitor quam tincidunt consectetur pretium.</p>
							<div class="info-slider__table">
								<div class="info-slider__table-item">
									<h6>Площадь</h6>
									<p>234м²</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Тип отопления</h6>
									<p>Водяное</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Напольное покрытие</h6>
									<p>Плитка</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Сроки реализации</h6>
									<p>18 Дней</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Тип объекта</h6>
									<p>Дом</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Количество этажей</h6>
									<p>2</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Количество комнат</h6>
									<p>6</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Стоимость проекта</h6>
									<p>₽ 1 045 400</p>
								</div>
							</div>
							<h4 class="info-slider__title-two">Про стоимость</h4>
							<div class="info-slider__row-footer">
								<div>
									<ul class="info-slider__list">
										<li>Mauris et ornare nibh, sed dictum leo. Sed gravida accumsan nisi, sed malesuada quam egestas vel.</li>
	   								<li>Mauris finibus magna a metus elementum ornare. Sed id mi ac purus efficitur mattis non eu erat. Nulla pellentesque euismod mi nec pharetra. 
											Aliquam erat volutpat. Nullam nec nisi lacus. Sed ornare molestie tellus, ut auctor augue malesuada quis. 
	   								</li>
										<li>Etiam felis elit, aliquam vitae fermentum vitae, dapibus a lectus. Etiam porttitor quam tincidunt consectetur pretium.</li>
										<li>Mauris auctor maximus lacus, eu laoreet enim suscipit ac. Sed accumsan quam nec nisi fermentum aliquam. </li>
									</ul>
									<h6 class="info-slider__suggestion">От 600.000 ₽</h6>
									<a class="info-slider__button" href="#!">Заказать</a>
								</div>
								<div>
									<img src="./img/info-slider__img.jpg" alt="картинка">
								</div>
							</div>
						</div><!--  -->
							</div>
						<div class="info-slider__item swiper-slide">
							<div class="info-slider__img">
								<img src="./img/info-slider6.jpg" alt="картинка">
							</div>
							<div class="info-slider__inner container">
							<h4 class="info-slider__title">О проекте</h4>
							<p class="info-slider__subtitle">Mauris et ornare nibh, sed dictum leo. Sed gravida accumsan nisi, sed malesuada quam egestas vel. Mauris finibus magna a metus elementum ornare. Sed id mi ac purus efficitur mattis non eu erat. Nulla pellentesque euismod mi nec pharetra. Mauris auctor maximus lacus, eu laoreet enim suscipit ac. Sed accumsan quam nec nisi fermentum aliquam. Aliquam erat volutpat. Nullam nec nisi lacus. Sed ornare molestie tellus, ut auctor augue malesuada quis. Etiam felis elit, aliquam vitae fermentum vitae, dapibus a lectus. Etiam porttitor quam tincidunt consectetur pretium.</p>
							<div class="info-slider__table">
								<div class="info-slider__table-item">
									<h6>Площадь</h6>
									<p>234м²</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Тип отопления</h6>
									<p>Водяное</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Напольное покрытие</h6>
									<p>Плитка</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Сроки реализации</h6>
									<p>18 Дней</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Тип объекта</h6>
									<p>Дом</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Количество этажей</h6>
									<p>2</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Количество комнат</h6>
									<p>6</p>
								</div>
								<div class="info-slider__table-item">
									<h6>Стоимость проекта</h6>
									<p>₽ 1 045 400</p>
								</div>
							</div>
							<h4 class="info-slider__title-two">Про стоимость</h4>
							<div class="info-slider__row-footer">
								<div>
									<ul class="info-slider__list">
										<li>Mauris et ornare nibh, sed dictum leo. Sed gravida accumsan nisi, sed malesuada quam egestas vel.</li>
	   								<li>Mauris finibus magna a metus elementum ornare. Sed id mi ac purus efficitur mattis non eu erat. Nulla pellentesque euismod mi nec pharetra. 
											Aliquam erat volutpat. Nullam nec nisi lacus. Sed ornare molestie tellus, ut auctor augue malesuada quis. 
	   								</li>
										<li>Etiam felis elit, aliquam vitae fermentum vitae, dapibus a lectus. Etiam porttitor quam tincidunt consectetur pretium.</li>
										<li>Mauris auctor maximus lacus, eu laoreet enim suscipit ac. Sed accumsan quam nec nisi fermentum aliquam. </li>
									</ul>
									<h6 class="info-slider__suggestion">От 600.000 ₽</h6>
									<a class="info-slider__button" href="#!">Заказать</a>
								</div>
								<div>
									<img src="./img/info-slider__img.jpg" alt="картинка">
								</div>
							</div>
						</div><!--  -->
							</div>
					</div>
				</div>
		</section>

.info {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	color: var(--white-color);
	background-color: var(--accent-color);
	border-radius: 30px;
	padding: 100px 0 100px 0;
}

.info-title {
	text-align: center;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 20px;
}

.info-subtitle {
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 30px;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
	position: relative;
}

.info-row__link {
	color: var(--white-color);
}

.info-row .swiper-scrollbar {
	position: absolute;
	top: 0px;
	left: 0;
}

.info-row .swiper-scrollbar-drag {
	cursor: pointer;
	background-color: var(--white-color);
}

.info-slider {
	position: relative;
}

.info-slider__wrapper {
}


.info-slider__item {
}

.info-slider__img {
	max-width: 100%;
}


.info-slider .swiper-button-prev::after,
.info-slider .swiper-button-next::after {
	color: var(--white-color);
	font-weight: 400;
}

.info-slider .swiper-button-prev,
.info-slider .swiper-button-next {
	position: absolute;
	top: 15%;
}

.info-slider .swiper-button-next::after {
	right: 0;
}



.info-slider__title {
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 100px;
}

.info-slider__subtitle {
	font-size: 16px;
	font-weight: 500;
	margin: 50px 0 50px 0;
}

.info-slider__table {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 50px;
	background-color: var(--accent-color-two);
	border-radius: 30px;
	padding: 50px 100px;
}

.info-slider__table-item {
}

.info-slider__table-item h6 {
	font-size: 16px;
	font-weight: 700;
}

.info-slider__table-item p {
	font-size: 16px;
	font-weight: 300;
}

.info-slider__title-two {
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 150px 0 70px 0;
}

.info-slider__row-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 115px;
}

.info-slider__list {
	font-size: 16px;
	font-weight: 500;
	list-style-type: square;
}

.info-slider__list li + li {
	margin-top: 10px;
}

.info-slider__row-footer div {
	max-width: 50%;
	flex-basis: 50%;
}

.info-slider__row-footer img {
	border-radius: 50px;
}

.info-slider__suggestion {
	margin-top: 30px;
	text-align: right;
	margin-bottom: 50px;
}

.info-slider__button {
	background-color: var(--accent-color-two);
	color: var(--white-color);
	font-size: 20px;
	font-weight: 700;
	border-radius: 30px;
	padding: 18px 72px;
	margin-left: 150px;
}

Вопрос задан более года назад
55 просмотров

Комментировать

Подписаться 1 Сложный Комментировать

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Ваш ответ на вопрос

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

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

JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 24 минуты назад
- 19 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- час назад
- 16 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 2 часа назад
- 21 просмотр
0

ответов
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 3 часа назад
- 55 просмотров
0

ответов
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 18 часов назад
- 50 просмотров
1

ответ
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 час назад
- 29 просмотров
0

ответов
HTML

Простой
Как на html реализовать блоки «Внимание / Важно»?
- 1 подписчик
- 21 час назад
- 109 просмотров
1

ответ
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 136 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 160 просмотров
5

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Написание статей в нужном стиле ( интерьер, дизайн спальни )

22 нояб. 2024, в 13:52

2000 руб./за проект

Необходимо доработать расширение для Google Chrome

22 нояб. 2024, в 13:51

5000 руб./за проект

Сделать на Python страницу с результатами теста

22 нояб. 2024, в 13:44

10000 руб./за проект

Answer 1 · 2023-10-03 13:34:40

var swiperInfo = new Swiper (".info-slider", {
	slidesPerView: 1,
	navigation: {
		nextEl: '.info-slider__next',
		prevEl: '.info-slider__prev'
	},
	pagination: {
		el: '.info-slider__pagination',
		clickable: true,
		dynamicBullets: true
	},
	scrollbar: {
		el: '.swiper-scrollbar',
		draggable: true
	},
	loop: true,
	slidesPerGroup: 1,
	
 });

Как связать слайдер + ссылку с адаптивным скроллом под ней?

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

Минуточку внимания

Войдите на сайт