wake-up-neo.com

Bildkarussell in Angular 6

Ich brauche ein Image-Karussell für meine Anwendung (Angular v6). Beim Surfen habe ich diese Lösung i, e mit ngx-drag-scroll gefunden. Gibt es eine andere Möglichkeit, das Image-Karussell so zu machen?

Scroll

Ohne jquery/javascript, nur mit TypeScript - kann ich das erreichen?

Jede Hilfe voller Ressourcen. Ich möchte, dass ein Karussell die Karte Komponente darin anzeigt.

6
Prashanth

 angular material card slider

Gibt es eine andere Möglichkeit, das Image-Karussell so zu machen?

Ja

Ohne jquery/javascript, nur mit TypeScript - kann ich das erreichen?

Ja (gut, TypeScript ist ein super Satz von JavaScript und Sie müssen immer noch mit dem DOM interagieren, aber ja)


Hier ist eine StackBlitz-Demo einer einfachen Implementierung, die sich anscheinend so verhält, wie Ihre Anforderungen aussehen und sich anfühlen. (Sie können beispielsweise Material Card components übergeben).

Es funktioniert im Wesentlichen wie folgt: Sie geben die SliderComponent DOM-Elemente (SliderItemDirectives) ein und fügen die aktuelle Breite des linken Elements zur Bildlaufposition des Schieberegler-Containers hinzu, wenn Sie mit der rechten Maustaste klicken. Durch Klicken auf links wird die Breite abgezogen. Ich habe ContentChildren und ViewChild verwendet, um zu den widths und scrollLeft-Eigenschaften zu gelangen. Die Animation wird mit dem css scroll-behavior: smooth; erreicht.

Hier ist die Hauptkomponente:

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++
    }
  }
}
4
Tom

Es gibt viele Lösungen, die das tun, was Sie brauchen, hier ist die einfachste:

Strukturieren Sie Ihre Komponente wie folgt:

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

Verwenden Sie CSS, um den Überlauf auf der X-Achse der Komponente auszublenden, und fügen Sie den linken Rand des Wrappers programmgesteuert hinzu, wenn Sie auf Schaltflächen klicken.

Sie können @ViewChild verwenden, um den Wrapper in Ihrer Komponentenklasse zu erfassen, damit Sie dessen CSS-Werte bearbeiten können

0
Marko Kacanski