Angular软件包的水平滚动(带有箭头) [英] Horizontal scroll (with arrows) for Angular package

问题描述

我正在寻找一个有角度的2-6封装，该封装具有水平的箭头滚动图像，类似于airbnb的箭头:

i'm looking for an angular 2-6 package that has a horizontal scroll of images with arrows exactly like the airbnb one:

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

Anyone ideas would be helpful - thank you

推荐答案

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

This is the solution is for custom horizontal scroll

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

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

And On click of left/right button use the following functions

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

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

这篇关于Angular软件包的水平滚动(带有箭头)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！