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

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 ещё

Средний
Как в slick slider сместить показ слайдов в связанных слайдерах?
- 1 подписчик
- 2 часа назад
- 18 просмотров
0

ответов
JavaScript

Средний
Как перезапустить полностью pixijs?
- 1 подписчик
- 13 часов назад
- 53 просмотра
1

ответ
JavaScript

+1 ещё

Средний
Как сделать поле ввода формы кликабельным?
- 1 подписчик
- 14 часов назад
- 51 просмотр
0

ответов
JavaScript

+3 ещё

Простой
Как создать html компоненты на vanilaJS + webpack?
- 1 подписчик
- 22 часа назад
- 85 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как решить конфликты имен переменных после минификации?
- 1 подписчик
- вчера
- 118 просмотров
1

ответ
JavaScript

Простой
Как применить js код к своему блоку?
- 2 подписчика
- вчера
- 158 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить ошибку 500 Internal Server Error nginx/1.26.2?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
CSS

+1 ещё

Простой
Почему не оборачивается обрезается текст при использовании flex?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
JavaScript

Простой
Как вернуться на первый шаг в форме?
- 1 подписчик
- вчера
- 79 просмотров
1

ответ
PHP

+2 ещё

Простой
Как обновить версию стилей в шаблоне Journal для Opencart 3?
- 1 подписчик
- вчера
- 24 просмотра
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

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

MakeDifference

от 30 000 до 80 000 ₽

Разработка платформы

08 нояб. 2024, в 13:07

3000 руб./в час

Выгружать данные через API LiveDune в БД

08 нояб. 2024, в 11:59

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

Сайт каталог - растениеводство

08 нояб. 2024, в 11:37

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

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,
	
 });

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

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

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

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