Как можно добавить стрелки в стороны?

Чтобы добавить стрелки в стороны и разместить их справа и слева от баннера, можно использовать CSS и HTML. Вот пример кода, который поможет сделать это:

HTML:
```html
<div class="banner">
  <div class="arrow left-arrow"></div>
  <!-- Содержимое баннера -->
  <div class="arrow right-arrow"></div>
</div>
```

CSS:
```css
.banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* стили для баннера */
}

.arrow {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  /* стили для стрелок */
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}
```

В этом примере мы создаем `div` с классом "banner", который представляет баннер. Внутри этого элемента мы размещаем две стрелки в виде `div` с классами "arrow", "left-arrow" и "right-arrow". 

CSS стили позволяют позиционировать баннер в центре и стрелки справа и слева от него. Классы "left-arrow" и "right-arrow" задают соответствующие позиции стрелок. Важно также задать `position: relative;` для баннера, чтобы стрелки могли быть позиционированы относительно него с помощью `position: absolute;`.

Вы можете настроить стили стрелок, чтобы они соответствовали вашим потребностям.

#slider{
  position: relative;
  margin: 0 auto;
}

#controls {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 50px;
}

#slider{ 
  margin: 0 auto;
  position: относительно;
}

#controls {
  height: 50px;
  left: 0;
  position: абсолютно;
  top: 50%;
  transform: перенести по вертикали на -50%;
  width: 100%;
}

#slider - задайте относительное позиционирование элементу со списком слайдов.
#controls - установите абсолютное позиционирование элементу с кнопками управления. Переместите его на 50% вверху родительского контейнера и сместите его на -50% по вертикали. Укажите ширину 100%.