Angular软件包的水平滚动（带有箭头）

Question

我正在寻找一个有角度的2-6封装，该封装的水平滚动图像的箭头与airbnb的箭头完全一样：

任何想法都会有所帮助-谢谢

Answer 1

您可以使用一些npm软件包，或了解如何构建图像滑块。在Google中搜索angular Carousel，您可以找到相同的各种结果，所有流行的包（例如bootstrap，ngx bootstrap）都具有此内置功能。<​​/ p>

Answer 2

这是针对自定义水平滚动的解决方案

在.html

中

 <div class="pull-left mt-sm">
                      <i class="icon-arrow-left pointer" (click)="scrollLeft()"></i>
                </div>   

 <div #widgetsContent class="custom-slider-main">
        <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
          <div class="info-box">
             <img src="file.jpg" class="info-box">
          </div>
    </div>

<div class="pull-right mt-sm">
    <i class="icon-arrow-right pointer" (click)="scrollRight()"></i>
    </div>

在.scss中

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

 .info-box{
    width: 50px;
    height:50px
 }

在.ts

@ViewChild('widgetsContent') widgetsContent: ElementRef;

然后单击左右按钮，使用以下功能

scrollLeft(){
    this.widgetsContent.nativeElement.scrollLeft -= 150;
  }

  scrollRight(){
    this.widgetsContent.nativeElement.scrollLeft += 150;
  }