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

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

Вопрос задан 03 окт. 2023
55 просмотров

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

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

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

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

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

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

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

Войти через центр авторизации

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

JavaScript

+2 ещё

Простой
Как в axios сделать подобный url?
- 1 подписчик
- 5 часов назад
- 38 просмотров
0

ответов
CSS

Простой
Как сверстать не стандартный макет?
- 1 подписчик
- 7 часов назад
- 38 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему схлопываются внешние отступы соседних элементов?
- 1 подписчик
- 10 часов назад
- 41 просмотр
0

ответов
CSS

+3 ещё

Простой
Как увеличить QPushButton на 105% через stylesheet?
- 1 подписчик
- 14 часов назад
- 26 просмотров
1

ответ
HTML

+2 ещё

Простой
Почему моргает видеофон на сайте?
- 1 подписчик
- вчера
- 78 просмотров
0

ответов
JavaScript

Простой
Как вывести фотографии из папки или из контейнера последовательно с отработкой на каждой анимации?
- 1 подписчик
- вчера
- 41 просмотр
1

ответ
CSS

Простой
В контейнере шириной 100% при разрешении 320рх кнопка вылазит за его пределы. как поставить ее в правый верхний угол?
- 3 подписчика
- вчера
- 441 просмотр
0

ответов
JavaScript

Простой
Как правильнее организовать код калькулятора?
- 1 подписчик
- 02 мая
- 129 просмотров
1

ответ
CSS

Простой
Как сделать такую границу?
- 2 подписчика
- 02 мая
- 185 просмотров
0

ответов
JavaScript

+3 ещё

Средний
Как поменять тип проекции карты в Leaflet?
- 3 подписчика
- 02 мая
- 742 просмотра
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Senior Fullstack JavaScript Node.js + React

Simplenight inc.

от 4 000 до 6 500 $

Внести правки в проект на nest и react

05 мая 2024, в 06:38

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

Специалист по телеграм

05 мая 2024, в 04:55

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

Название проекта: Бот Telegram для автоматизации судебных приказов

05 мая 2024, в 02:15

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

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

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

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

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

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