单击以角度 6 水平滚动 div

Question

我正在使用 Angular 6 和 CSS 引导框架。我想在单击左/右按钮时水平滚动 div。

我想滚动下面的 div，章节名称可能包含一章或多于 1 章，即 1-10 章。如何实现左键和右键的水平滚动。

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

作为参考，在下面的示例中，我们有带有图像的电影名称。我只使用文本，

我当前的用户界面如下所示，我需要实现点击事件滚动功能，

Answer 1

您正在寻找的是一个旋转木马...它有箭头表示您所瞄准的滚动效果：

相关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>

相关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}`;
  }
}

完成working stackblitz here