web-dev-qa-db-fra.com

Carrousel d'images en angulaire 6

J'ai besoin d'un carrousel d'images pour mon application (Angular v6). En surfant, j'ai trouvé ce solution i, e en utilisant ngx-drag-scroll. Existe-t-il un autre moyen de faire le carrousel d'images comme celui-ci?

Scroll

Sans utiliser jquery/javascript, utilisez uniquement TypeScript - puis-je y parvenir?

Toute aide pleine de ressources. Je veux un carrousel pour afficher le composant card à l'intérieur.

angulartypescriptangular6carousel
6
Prashanth

 angular material card slider

Existe-t-il un autre moyen de faire le carrousel d'images comme celui-ci?

Oui

Sans utiliser jquery/javascript, n'utilisez que TypeScript - puis-je y parvenir?

Oui (bien, TypeScript est un super jeu de JavaScript et vous devez toujours interagir avec le DOM, mais oui)

Voici une démo de StackBlitz d'une implémentation simple qui semble se comporter, ressembler et se sentir comme vos exigences. (Par exemple, vous pouvez passer le matériau Card composants).

Cela fonctionne fondamentalement comme ceci: vous donnez les SliderComponent éléments DOM (SliderItemDirectives) et cela ajoutera la largeur de l'élément le plus à gauche actuel à la position de défilement du conteneur de curseur lorsque vous cliquez à droite. En cliquant à gauche, on soustrait la largeur. J'ai utilisé ContentChildren et ViewChild pour accéder aux propriétés width et scrollLeft. L'animation est réalisée avec le css scroll-behavior: smooth;.

Voici le composant principal:

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

Il existe de nombreuses solutions qui feraient ce dont vous avez besoin, voici la plus simple:

Structurez votre composant comme ceci:

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

Utilisez CSS pour masquer le débordement sur l'axe x du composant, puis ajoutez et soustrayez par programme la marge de gauche du wrapper lorsque vous cliquez sur les boutons.

Vous pouvez utiliser @ViewChild pour récupérer le wrapper dans votre classe de composant afin de pouvoir manipuler ses valeurs CSS.

0
Marko Kacanski