Как можно связать слайдер с ссылкой так, чтобы при использовании адаптивного скроллинга они оставались взаимосвязанными?

Какова структура и характеристики данного блока?
Изображение к вопросу
  • 3 октября 2023 г. 10:37
Ответы на вопрос 3
Для связывания слайдера со ссылкой при использовании адаптивного скроллинга можно использовать JavaScript, чтобы обрабатывать события прокрутки и обновлять ссылку в соответствии с текущим положением слайдера. 

Ниже приведена примерная структура и характеристики блока:

HTML:
```html
<div class="slider">
  <div class="slide">Слайд 1</div>
  <div class="slide">Слайд 2</div>
  <div class="slide">Слайд 3</div>
</div>

<a href="#" id="link">Ссылка</a>
```

CSS:
```css
.slider {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  scroll-padding-right: 16px; /* ширина скроллбара */
}

.slide {
  width: 100%;
  height: 200px;
}

a {
  display: block;
}
```

JavaScript:
```javascript
const slider = document.querySelector('.slider');
const link = document.querySelector('#link');

slider.addEventListener('scroll', () => {
  const slideHeight = slider.offsetHeight / 3; // общая высота слайдера разделенная на количество слайдов
  const currPosition = slider.scrollTop / slideHeight; // текушее положение слайдера разделенное на высоту слайда
  const roundedPosition = Math.floor(currPosition) + 1; // округляем текущую позицию до целочисленного значения
  link.innerText = `Ссылка ${roundedPosition}`;
});
```

В данном примере слайдер имеет класс "slider", а его слайды - класс "slide". Ссылка имеет идентификатор "link".

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

Обратите внимание, что в данном коде предполагается, что слайдер будет иметь только 3 слайда. Если у вас будет другое количество слайдов, то вам нужно будет соответствующим образом изменить значение переменной "slideHeight" и количество слайдов в функции "innerText". Все зависит от вашей конкретной реализации слайдера.
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,

});

// 

swiperInfo - это переменная, в которой хранится экземпляр Swiper. 
Переменная swiperInfo создается с помощью оператора new и конструктора Swiper.
.swiper-container - это css-класс, который задает контейнер для слайдера.
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 - опция, которая задает количество слайдов, перемещаемых за один раз.
Похожие вопросы