Angular 6中的图像轮播
Angular 6中的图像轮播
提问于 2018-12-27 17:06:23
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-02 13:16:43
有没有其他方法可以像这样做图像旋转木马？
是
不使用jquery/javascript，只使用Typescript -我能做到这一点吗？
是的( TypeScript是JavaScript的超集，您仍然需要与DOM进行交互，但确实如此)
一个简单实现的，它的行为、外观和感觉都很符合您的需求。(例如，可以向其传递Material Card components)。
它基本上是这样工作的:您给出了SliderComponent DOM元素(SliderItemDirectives)，当您单击鼠标右键时，它会将当前最左侧元素的宽度添加到滑块容器的滚动位置。单击左侧减去宽度。我使用了ContentChildren和ViewChild来获得widths和scrollLeft属性。动画是通过css scroll-behavior: smooth;实现的。
以下是主要组件：
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}Stack Overflow用户
发布于 2018-12-27 17:32:16
有许多解决方案可以满足您的需求，下面是最简单的一个：
像这样组织你的组件：
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>使用CSS隐藏组件x轴上的溢出，然后在单击按钮时以编程方式添加和减去包装上的左边距。
您可以使用@ViewChild来获取组件类中的包装器，这样就可以操作它的CSS值
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53942415
复制相关文章
相似问题
腾讯云开发者
