Css 单击以角度6水平滚动div
我正在使用Angular 6和css引导框架。我想在单击左/右按钮时水平滚动div 我想滚动下面的div，章节名称可能包含一章或多章，即1-10章。如何实现水平滚动点击左箭头和右箭头按钮Css 单击以角度6水平滚动div,css,angular,scroll,angular6,scrollto,Css,Angular,Scroll,Angular6,Scrollto,我正在使用Angular 6和css引导框架。我想在单击左/右按钮时水平滚动div 我想滚动下面的div，章节名称可能包含一章或多章，即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
<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>
chapter.name
你要找的是一个旋转木马。。。其中有箭头表示您想要的滚动效果： 相关的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>
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}`;
}
}
完成与您的问题无关的但您的HTML是错误的，您不能在