Angular 包的水平滚动（带箭头）答案

【问题标题】：Horizontal scroll (with arrows) for Angular packageAngular 包的水平滚动（带箭头）
【发布时间】：2019-11-19 20:36:12
【问题描述】：

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

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

【问题讨论】：

您可以使用 angular slick carousel devmark.github.io/angular-slick-carousel/# 并使用 css 对其进行样式设置，使其看起来与上面相同。
@inbanco 检查这个小提琴链接jsfiddle.net/yfqyq9a9/2
这个也是你必须检查的，因为你有一些想法stackoverflow.com/questions/48955095/…和jsfiddle.net/Lpjj3n1e
stackoverflow.com/questions/54008709/… ?

标签： css angular npm

【解决方案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;
  }

【讨论】：

【解决方案2】：

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

【讨论】：