web-dev-qa-db-ja.com

Angular 6の画像カルーセル

私のアプリケーション（Angular v6）には画像カルーセルが必要ですが、サーフィン中にこれを見つけました solution i、e using ngx-drag-scroll。このような画像カルーセルを実行する他の方法はありますか？

Scroll

使わずに jquery/javascript、TypeScriptのみを使用して-これを達成できますか？

すべてのヘルプリソース。カルーセルにその中に card コンポーネントを表示させたい。

angulartypescriptangular6carousel
7
PGH

angular material card slider

このような画像カルーセルを実行する他の方法はありますか？

はい

TypeQueryのみを使用してjquery/javascriptを使用せずに-これを達成できますか？

はい（TypeScriptはJavaScriptのスーパーセットであり、DOMとやり取りする必要がありますが）

ここにStackBlitzのデモがありますは、要件のように振る舞い、見た目と感じのように見える単純な実装です。 （たとえば、Material Card componentsに渡すことができます）。

基本的には次のように動作します：SliderComponent DOM要素（SliderItemDirectives）を指定し、右クリックすると、スライダーコンテナーのスクロール位置に現在の左端の要素の幅を追加します。左をクリックすると、幅が差し引かれます。 ContentChildrenとViewChildを使用して、幅と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++
    }
  }
}
12
Tom

必要なことを行う多くのソリューションがありますが、最も簡単なものを次に示します。

コンポーネントを次のように構成します。

<component>
  <div class="wrapper">
    <card>
    <card>
    <card>
    ...
    <card>
  </div class="wrapper">
</component>

CSSを使用してコンポーネントのx軸のオーバーフローを隠し、ボタンがクリックされたときにラッパーで左マージンをプログラムで追加および削除します。

@ ViewChild を使用してコンポーネントクラスのラッパーを取得し、そのCSS値を操作できます。

0
Marko Kacanski