Сайд скроллер – удобный способ навигации по длинным страницам

Сайд скроллер - это виджет (элемент интерфейса), который позволяет отображать контент (например, изображения или текст) внутри заданной области с возможностью прокручивания содержимого в горизонтальном или вертикальном направлении.

Например, можно создать сайд скроллер, который будет отображать набор изображений, прокручиваемый влево или вправо при помощи кнопок "Вперед" и "Назад":

HTML-разметка:

html

  

    
    
    
    
    
  
  

    Назад
    Вперед
  

Стили:

css
.scroller {
  overflow: hidden;
  width: 600px; /* ширина видимой области */
}
.scroller-content {
  display: flex;
  flex-direction: row; /* контент будет располагаться в ряд */
  transition: transform 0.5s ease; /* для плавной анимации переключения */
}
.scroller-content img {
  width: 200px; /* ширина изображения */
  height: 200px; /* высота изображения */
  object-fit: cover; /* для подгонки изображения под размер */
}
.scroller-navigation {
  display: flex;
  justify-content: center;
}
.scroller-prev,
.scroller-next {
  margin: 0 10px;
}

JavaScript-код:

js
const scroller = document.querySelector('.scroller');
const content = scroller.querySelector('.scroller-content');
const prevBtn = scroller.querySelector('.scroller-prev');
const nextBtn = scroller.querySelector('.scroller-next');
const itemWidth = content.querySelector('img').offsetWidth;
const itemsCount = content.querySelectorAll('img').length;
let currentPosition = 0;
function scrollTo(position) {
  content.style.transform = `translateX(-${position * itemWidth}px)`;
  currentPosition = position;
  updateNavigation();
}
function updateNavigation() {
  prevBtn.disabled = (currentPosition === 0);
  nextBtn.disabled = (currentPosition === itemsCount - 1);
}
prevBtn.addEventListener('click', () => {
  scrollTo(currentPosition - 1);
});
nextBtn.addEventListener('click', () => {
  scrollTo(currentPosition + 1);
});
updateNavigation();

В этом примере мы используем CSS-свойство `overflow: hidden` для скрытия контента, который выходит за рамки видимой области. Сам контент располагается внутри блока `.scroller-content`, который устанавливается в ряд при помощи свойства `display: flex; flex-direction: row;`. Ширина каждого изображения задается равной 200 пикселям, но может быть любой. Для перехода между состояниями ("листания" контента) мы используем JavaScript: считываем ширину элемента, вычисляем текущую позицию, перемещаем контент на нужную позицию и обновляем состояние кнопок навигации. Полный код можно посмотреть на [CodePen](https://codepen.io/s0rus/pen/mdOqxPv).