typescript - Bildekarusell i Angular 6

Jeg trenger en bildekarrusel for applikasjonen min (Angular v6). Mens jeg surfet, fant jeg denne løsningen som bruker ngx-drag-scroll. Finnes det noen annen måte å lage bildekarruselen på som denne karruselen og vise kortkomponenten inni den?

Kan det oppnås uten å bruke jQuery og kun Typescript?

Svar #1

Finnes det noen annen måte å lage bildegalleriet på slik?

Ja

Uten å bruke jquery/javascript, bare ved å bruke Typescript - kan jeg oppnå dette?

Ja (vel, TypeScript er en utvidelse av JavaScript og du må fortsatt samhandle med DOM, men ja)

Her er en StackBlitz-demo av en enkel implementering som ser ut til å oppføre seg, se ut og føles som dine krav. (For eksempel kan du sende det Material Card-komponenter).

Det fungerer i utgangspunktet slik: du gir SliderComponent DOM-elementer (SliderItemDirectives) og den vil legge til bredden på det mest venstre elementet til rulleposisjonen til slider-konteineren når du klikker høyre. Å klikke venstre trekker fra bredden. Jeg har brukt ContentChildren og ViewChild for å få tilgang til breddene og scrollLeft-egenskapen. Animasjonen oppnås med CSS scroll-behavior: smooth;.

Her er hovedkomponenten:

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

Relaterte artikler