bbs-go-site

我正在尝试制作带有移动按钮和轮播样式的图像滑块。这些项目添加在末尾或开始处，以使滑块在任意方向上都可以移动。左按钮按预期工作，但右按钮要么工作一次，要么滚动中断。我认为这是因为父级溢出在右侧。我做了很多尝试，觉得我离解决方案不远，但是没有任何效果。我也没有帮助就检查了很多问题。没有人是“无限”的风格。

请注意，我对任何包或库都不感兴趣

的CSS

.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);
  }
}

的HTML

<div class="slides-wrapper">

    <p (click)="moveSlide(false)" class="arrow left">︎◀︎</p>

    <div #list class="slides">
        <ng-container *ngFor="let item of slides; let i = index">
            <!--  -->
            <div [class.scroll-to-right]="direction=='right'" [class.scroll-to-left]="direction=='left'" class="slide">
                {{item}}
            </div>
        </ng-container>
    </div>


    <p (click)="moveSlide(true);" class="arrow right">►</p>

</div>

  slides = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  direction = "";

  constructor() {}

  ngOnInit(): void {}

  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";
    }
  }

Stackblitz

向右滚动图像滑块