cssangularscrollangular6scrollto

On click scroll div horizontally in angular 6

I am using Angular 6 and bootstrap framework for css. I want to scroll the div horizontally on click on left/right buttons.

I want to scroll the below div, chapter names may contain one chapter or more than 1 i.e 1-10 chapters. How to achieve the horizontal scroll on click of let and right arrow buttons.

<div style="margin-top:52px;" *ngFor="let chapter of chapters; let i = index" >
<li style="display: inline-block;float: left; padding: 0px 30px 0px 0px;"> chapter.name </li>
</div>

For reference, in the below example we have movie names with image. i am using only text,

enter image description here

my current ui is looking like below and i need to achieve that on click event scrolling functionality,

enter image description here

Solution

  • What you're looking for is a carousel... which has arrows for the scrolling effect that you're aiming for:

    relevant HTML:

    <div class='containerDiv'>
    <carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [showIndicators]="false" [noWrap]="!noWrap"
     [interval]="false" [startFromIndex]="0" (slideRangeChange)="onSlideRangeChange($event)">
        <slide *ngFor="let slide of slides; let index=index">
            <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <p>some optional text {{index}}</p>
    </div>
  </slide>
</carousel>
</div>

    relevant TS:

    import { Component } from '@angular/core';

@Component({
  selector: 'demo-carousel-multilist',
  templateUrl: './multilist.html',
  styles: [`
  ::ng-deep a.carousel-control-prev, a.carousel-control-prev:hover {left:-7% !important;}
  ::ng-deep .carousel-control-next, .carousel-control-next:hover {right:-8% !important;}
  slide{margin:5px;}
  .carousel-caption{position:relative; text-align: center; padding: 15px 0 0 0; bottom: 0;}
  `]
})
export class DemoCarouselMultilistComponent {
  itemsPerSlide = 4;
  singleSlideOffset = false;
  noWrap = false;

  slidesChangeMessage = '';

  slides = [
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/4.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/5.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/6.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/7.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/8.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'}
  ];

  onSlideRangeChange(indexes: number[]): void {
    this.slidesChangeMessage = `Slides have been switched: ${indexes}`;
  }
}

    complete working stackblitz here