typescript Angular 6 中的图像轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53942415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image carousel in Angular 6
提问by PGH
I need an image carousel for my application (Angular v6), while surfing I found this solutioni,e using ngx-drag-scroll. Is there any other way to do the image carousel like this ?
我的应用程序（Angular v6）需要一个图像轮播，在冲浪时我找到了这个解决方案，我使用ngx-drag-scroll. 有没有其他方法可以像这样制作图像轮播？
Without using
jquery/javascript,using only Typescript - can I achieve this?
不使用
jquery/javascript，只使用 Typescript - 我能做到这一点吗？
Any help full resources. I want a carousel to display the cardcomponent inside it.
任何帮助完整的资源。我想要一个旋转木马来显示其中的卡片组件。
回答by Tom
Is there any other way to do the image carousel like this ?
有没有其他方法可以像这样制作图像轮播？
Yes
是的
Without using jquery/javascript,using only Typescript - can I achieve this?
不使用 jquery/javascript，只使用 Typescript - 我能做到这一点吗？
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
是的（TypeScript 是一个超级 JavaScript 集，你仍然需要与 DOM 交互，但是是的）
Here is a StackBlitz demoof a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Cardcomponents).
这是一个简单实现的 StackBlitz 演示，它的行为、外观和感觉都符合您的要求。（例如，您可以将其传递给 MaterialCard组件）。
It basically works like this: you give the SliderComponentDOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildrenand ViewChildto get to the widths and scrollLeftproperty. The animation is achieved with the css scroll-behavior: smooth;.
它基本上是这样工作的：你给SliderComponentDOM 元素 ( SliderItemDirectives)，当你点击右键时，它会将当前最左边元素的宽度添加到滑块容器的滚动位置。点击左边减去宽度。我已经利用ContentChildren并ViewChild获得了宽度和scrollLeft属性。动画是通过 css 实现的scroll-behavior: smooth;。
Here is the main Component:
这是主要的组件：
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++
}
}
}
回答by Marko Kacanski
There are many solutions that would do what you need, here is the most simple one:
有很多解决方案可以满足您的需求，这里是最简单的一个：
Structure your component something like this:
像这样构造你的组件：
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
使用 CSS 隐藏组件 x 轴上的溢出，然后在单击按钮时以编程方式在包装器上添加和减去左边距。
You can use @ViewChildto get a hold of the wrapper in your component class so you can manipulate its' CSS values
您可以使用@ViewChild来获取组件类中的包装器，以便您可以操作其 CSS 值
