Как при скролле мышкой прокручивать слайдер а не страницу?

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

1. Начнем с HTML-разметки, где у вас есть контейнер для слайдера и непосредственно сам слайдер:

<div class="slider-container">
  <div class="slider">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
    <div class="slide">Слайд 3</div>
    <!-- Добавьте еще слайды, если нужно -->
  </div>
</div>

2. Далее вам нужно определить стили для слайдера и его элементов в CSS:

.slider-container {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

.slider {
  display: inline-flex; /* Горизонтальное размещение слайдов */
}

.slide {
  width: 100vw; /* Ширина каждого слайда равна ширине видимой области */
}

3. Теперь добавим JavaScript, чтобы прокрутка колесиком мыши работала для слайдера, а не для страницы:

const slider = document.querySelector('.slider-container');

slider.addEventListener('wheel', (event) => {
  event.preventDefault();
  slider.scrollLeft += event.deltaY;
});

Этот код предотвращает стандартную прокрутку страницы при использовании колесика мыши внутри слайдера и вместо этого прокручивает слайдер по горизонтали на значение event.deltaY.

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