Создайте скрытый переполнение слева, а не справа

Question

Я хочу создать карусель.

Проблема в том, что overflow справа, а я хочу быть слева;Я пытался right:0, но, похоже, не работает;

.row { 
width:300px;
}

.carousel { 
max-width: 100%;
position: relative;
white-space: nowrap;
  border: 1px solid red;
}
.container{
  position: relative;
  // overflow: hidden;
  //right:0;
}

.items {
display: block;
left: 0;
position: relative;
top: 0;

}

<div class="row">
<div class="carousel">
  <div class="container">
    <div class="items">
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
      <a> <img src="https://fakeimg.pl/50x50/"></a>
     </div>
    </div>
 </div
</div>

Answer 1

Измените направление на rtl

.row {
  width: 300px;
}

.carousel {
  max-width: 100%;
  white-space: nowrap;
  border: 1px solid red;
}

.items {
  direction:rtl;
}

<div class="row">
  <div class="carousel">
    <div class="container">
      <div class="items">
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
        <a> <img src="https://fakeimg.pl/50x50/"></a>
      </div>
    </div>
  </div>
</div>