Карусель мультисползная на заказ в угловой 6 - PullRequest
Новая
       17

Карусель мультисползная на заказ в угловой 6

0 голосов
/ 21 декабря 2018

Я пытаюсь сделать собственную многослайдную карусель в чистом Angular 6 такой же, как автоматическое воспроизведение.Но я не могу понять, как добавить анимацию или переход при их изменении.Я новичок в угловой, но я настаиваю на этом.Я не нахожу другого пути, чтобы искать вашу помощь.

Предположим, сначала я отображаю 1 2 3 4, через 2 секунды я хочу отобразить 2 3 4 5. Я попробовал подходы, указанные ниже

Approach-1:

  1. Сначала я поместил все элементы слайда (1,2,3 ...) в массив и удалил его из родительского элемента.
  2. Я добавил только четыре элемента в родительский элемент
  3. Затем, каждые 2 секунды, я удалял первый элемент родительского элемента и добавлял один элемент из массива в родительский элемент, используя renderer2.
  4. Я не могt добавить анимацию или переход.

Approach-2:

  1. Каждые 2 секунды я удаляю первый элемент parent и добавляю его к parent как последний.
  2. Я не могу добавить анимацию или переход.

Approach-3:

  1. Сначала я нажал все элементы слайда (1,2,3 ...) в массиве и удалил его из родительского.
  2. Я добавил только четыре элемента в родительский (1,2,3,4,5)
  3. через 2 секунды удалить всеэти четыре формы родителя
  4. Добавить еще четыре элемента (2,3,4,5,6)
  5. Я добавил анимацию в CSS
  6. , но это не работает идеально.

====> Я предоставляю код для этого подхода - 3

Как применить анимацию или переход при их изменении.Что было бы лучшим подходом для этого.Прошу прощения, если я не могу дать вам понять.

HTML: 

    <div class="custom-carousel" #carousel>
        <div class="carousel-item">1</div>
        <div class="carousel-item">2</div>
        <div class="carousel-item">3</div>
        <div class="carousel-item">4</div>
        <div class="carousel-item">5</div>
        <div class="carousel-item">6</div>
        <div class="carousel-item">7</div>
    </div>

SASS: 

.carousel-item {
        display: inline-block;
        height: 300px;
        width: 300px;
        background-color: red;
        margin: 10px;

        //a mixin called keyframe

        @include keyframe(goLeft){
            from {
                transform: translateX(0px);
            }
            to {
                transform: translateX(-300px);
            }
        }

        animation: goLeft 2s ease-out;
}

.TS: 

    @ViewChild('carousel') slider: ElementRef;
    constructor(private ren: Renderer2) {}

    carouselSlides = [];
    childNumber = 0;
    start = 0;

    pushElementIntoCarouselSlidesArray() {
    let i = 0;
    let parent = this.slider.nativeElement.querySelector('.custom-carousel');
    for (i = 0; i < this.childNumber; i++) {
      this.carouselSlides.push(parent.children[i]);
    }
    this.deleteAllChild();
    }

    deleteAllChild() {
    let i;
    let parent = this.slider.nativeElement.querySelector('.custom-carousel');
    for (i = 0; i < parent.children.length; i++) {
      this.ren.removeChild(parent, parent.children[i]);
    }
    }

    addSlideToView(n: number) {
    let parent = this.slider.nativeElement.querySelector('.custom-carousel');
    for(let i=this.start; i<this.start+n; i++){
      this.ren.appendChild(parent,this.carouselSlides[i]);
    }

    this.start++;
    if(this.start > this.childNumber - n){
      this.start = 0;
    }
    }

    ngAfterViewInit(): void {

    let parent = this.slider.nativeElement.querySelector('.custom-carousel');
    this.childNumber = parent.children.length;

    this.pushElementIntoCarouselSlidesArray();
    this.addSlideToView(5);

    setInterval(() => {
      this.deleteAllChild();
      this.addSlideToView(5);
    }, 5000);
    }
...