Horizontal scroll (with arrows) for Angular package

Question

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

Answer 1

This is the solution is for custom horizontal scroll

In .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>

In .scss

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

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

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

Answer 2

You can use some npm package, or learn how to build your image slider. Search angular Carousel in google and you can find various result for same, all popular packages like bootstrap, ngx bootstrap have this inbuilt.