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

You can use angular slick carousel http://devmark.github.io/angular-slick-carousel/#/ and style them with css to look like same as above. — Javascript Hupp Technologies, Jan 04 '19 at 05:27
@inbanco check this fiddle link http://jsfiddle.net/yfqyq9a9/2/ — Arshiya Khanam, Jan 04 '19 at 05:51
This one also you have to check because you get some what ideas https://stackoverflow.com/questions/48955095/horizontal-scroll-using-buttons-on-angular2 and http://jsfiddle.net/Lpjj3n1e/ — Arshiya Khanam, Jan 04 '19 at 05:52
https://stackoverflow.com/questions/54008709/how-can-i-add-infinite-scrolling-to-this-angular-carousel/54013602#54013602 ? — Eliseo, Jan 04 '19 at 07:52

score 8 · Answer 1 · answered Nov 19 '19 at 12:36

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

That is custom css classes. You can ignore that. FYI pull-left if for float:left and mt-sm is for margin-top:5px; — Sahil Ralkar, Sep 12 '22 at 04:18

score 1 · Answer 2 · answered Jan 04 '19 at 05:23

1

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.

answered Jan 04 '19 at 05:23

Akshay Rajput

1,978
1
12
22

Horizontal scroll (with arrows) for Angular package

2 Answers2

Linked