Как создать скроллбары или слайдеры на веб-странице?

Создание скроллбаров или слайдеров на веб-странице можно осуществить с помощью стилей CSS и JavaScript. Вот примеры, как это можно сделать:

1. Создание скроллбара с использованием CSS:

```css
.example {
  height: 200px;
  overflow-y: scroll;
}
```

2. Создание слайдера с использованием JavaScript и библиотеки jQuery:

```html
<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

<script>
$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
  });
});
</script>
```

Относительно выбора между скроллбаром и слайдером, решение зависит от конкретных потребностей вашего проекта. Скроллбары удобны для прокрутки больших блоков текста или контента, в то время как слайдеры обычно используются для показа изображений или контента в виде слайдов. Поэтому выбор между ними зависит от того, какой тип контента вы хотите отображать и какая функциональность вам необходима.

Делал точно такую штуку как на 2 картинке через скролл бар. 
 Пример 
 Сначала делал, чтобы на десктопе листали по 1 элементу, потом попросили чтобы как мобильный скролл бар был, через js делал. 
 А кнопки листают 1 элементу. Ширина элемента высчитываю при загрузке компонента и от этого исхожу.