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

CSS HTML JavaScript

16 февраля 2026 1 ответ

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

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

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

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

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

Дополнительно:

Ответы:

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

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

Скажите, а как называется шаблон?Могли бы скинуть ссылку на него?
Максим, https://buildhtml.ru/template/629
oksana_melikhova, спасибо

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ирина WP Ответ

22 февраля 2026 в 03:24

Для связывания слайдера с ссылкой и добавления адаптивного скролла под ним, вам потребуется использовать HTML, CSS и JavaScript. Ниже приведен пример кода для реализации данной функциональности:

```html

Slider with Link and Adaptive Scroll

.slider {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
}
.slide {
width: 100%;
}
.scroll {
width: 100%;
overflow-y: scroll;
max-height: 200px; /* Вы можете установить любую максимальную высоту */
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dignissim dolor nec quam sodales, sit amet ultricies mi lacinia. Sed euismod bibendum purus, vitae luctus libero eleifend non.

Learn More

const slides = document.querySelector('.slides');
const scroll = document.querySelector('.scroll');

slides.addEventListener('scroll', () => {
scroll.scrollLeft = slides.scrollLeft;
});

```

В данном примере у нас есть слайдер с изображениями и блоком текста с ссылкой под ним. JavaScript код связывает прокрутку слайдера с прокруткой блока текста, обеспечивая одновременную прокрутку обоих элементов.

Вы можете настроить стили, изображения и содержимое текста под свои потребности. Надеюсь, это решит вашу проблему с созданием слайдера с ссылкой и адаптивным скроллом.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ Instagram Как вставить группу полей ACF в записи после 1-го абзаца в WordPress? 0 ответов

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

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно