Меньшая горизонтальная полоса прокрутки, чем ширина div? +Нет фиговой подписи?

Я пытаюсь сделать изображение "карусель" с горизонтальной прокруткой. Чистый HTML + CSS без JS.

Это мой HTML:

<div class = "slideshow">
    <figure class = "slideshow__fig">
        <img src = "img/hilti-png.png" alt = "" class = "slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    <figure class = "slideshow__fig">
        <img src = "img/hilti-png.png" alt = "" class = "slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    <figure class = "slideshow__fig">
        <img src = "img/hilti-png.png" alt = "p" class = "slideshow__fig-img">
        <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
</div>

Это мой css:

.slideshow {

display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
//width: 80vw;
//margin: auto;

&::-webkit-scrollbar {
    width: 350px;
    height: 10px;
  }
  
  /* Track */
  &::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  &::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 500px;
  }
  
  /* Handle on hover */
  &::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }


&__fig {
    flex: 0 0 auto;
    height: 900px;

    &-img{
        height: 100%;
        //width: 100%;
        display: block;
    }
}

}

1. Проблема заключается в том, что когда я устанавливаю ширину .slideshow на 80vw, полоса прокрутки, естественно, становится короче, но мои изображения обрезаются и не отображаются на всю ширину экрана. Когда я пытаюсь настроить ширину полосы прокрутки с помощью ::-webkit-scrollbar {width: 350px или 50vw или ...}, ничего не происходит.

Я хотел бы иметь полосу прокрутки, которая не является полной шириной div, который я прокручиваю, но почему-то не могу понять это.

2 - Другая проблема в том, что я хотел бы иметь figcaption в нижней левой части изображения. Но почему-то не отображается, когда есть горизонтальная прокрутка. Какие-либо предложения?

Вот пример того, как я хотел бы это иметь:

Пример изображения

Edit: Теперь мне наконец удалось это сделать, добавив:

&::-webkit-scrollbar-button:end:increment {
    width: 50%;
    display: block;
    background: transparent;
  }

Но теперь проблема в том, что полоса прокрутки находится не посередине, а с левой стороны. Margin:auto не помогает. Без понятия, как еще это сделать.

Также создание размера изображения 90% показало заголовок, который является не таким уж плохим решением.

Теперь вопрос только в том, как поставить полосу прокрутки в центр.