用于Angular包装的水平滚动(带箭头)

Question

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

​

任何人的想法都会很有帮助-谢谢

Answer 1

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

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

Answer 2

你可以使用一些npm包，或者学习如何构建你的图像滑块。在谷歌中搜索angular Carousel，你可以找到相同的各种结果，所有流行的软件包，如bootstrap，ngx bootstrap都内置了这个。