title: Right scroll for an image slider
body: <p>I am attempting to make an image slider with moving buttons and carousel style. The items are added at the end or at the start to make the slider go around whichever the direction is.<br>
  The left button works as expected, but the right button either works once, either the scrolling is broken. I think it is because the parent overflow is on the right.<br>
  I made many attempts and feel I am not far from the solution, but nothing works. I also checked many, many questions SO with no help. There is no one that is 'infinite' style.</p>
  
  <p>Note, that I am not interested in any packages or libraries  </p>
  
  <p>CSS</p>
  
  <pre><code>.slides-wrapper{
    width:95%;
    height:4em;
    margin-top:3em;
    margin-left:1em;
    display:flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .arrow{
    z-index:1;
    cursor:pointer;
    font:larger;
    width:fit-content;
    line-height:1.5;
  }
  
  .slides{
    height:100%;
    width:94%;
    display:flex;
    overflow:hidden;
    justify-content:space-between;
    border:1px solid blue;
  }
  
  .slide{
    min-width:calc(18.5% - 2px);
    margin-right:2%;
    height:100%;
    background:red;
    border:1px solid black;
    text-align: center;
  }
  
  .scroll-to-left {
     animation-duration: 1.5s;
     animation-name: scroll-to-left;
     animation-fill-mode: forwards;
     transform: translateX(0);
  }
  
  @keyframes scroll-to-left {
     100% {
        transform: translateX(-113%);
     }
  }
  
  .scroll-to-right {
      animation-duration: 1.5s;
      animation-name: scroll-to-right;
      animation-fill-mode: both;
      transform: translateX(-113%);
  }
  
  @keyframes scroll-to-right {
    100% {
        transform: translateX(0);
    }
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="slides-wrapper"&gt;
      &lt;p (click)="moveSlide(false)" class="arrow left"&gt;︎◀︎&lt;/p&gt;
  
      &lt;div class="slides"&gt;
          &lt;ng-container *ngFor="let item of slides; let i = index"&gt;
              &lt;div [class.scroll-to-right]="direction=='right'" [class.scroll-to-left]="direction=='left'" class="slide"&gt;
                  {{item}}
              &lt;/div&gt;
          &lt;/ng-container&gt;
      &lt;/div&gt;
  
      &lt;p (click)="moveSlide(true);" class="arrow right"&gt;►&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>slides = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  direction = "";
  
  moveSlide(toRight: boolean) {
    if (toRight) {
      if (this.direction) {
        this.slides.unshift(this.slides.pop());
        this.direction = "right";
      }
    } else {
      if (this.direction) {
        this.slides.push(this.slides.shift());
      }
      this.direction = "left";
    }
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-ivy-zdb63h" rel="nofollow noreferrer">Stackblitz</a></p>