Question

我正在使用带有ngx-bootstrap的Angular 4。要使用bootstrap轮播每次显示一张幻灯片，它工作得很好。但是目前我需要在每张幻灯片上显示大约3个项目，每次只移动一张幻灯片。是否有任何Angular方法可以达到这个目的？

带有bootstrap轮播的多个项目的示例可以在这里看到： https://codepen.io/kchez/pen/jWzqjo

我尝试通过调用ngAfterViewChecked中的函数来执行相同的工作，但它没有按预期工作。

callMultipleSlide() {
    // Instantiate the Bootstrap carousel
    jQuery('.multi-item-carousel').carousel({
      interval: 1500
    });

    // for every slide in carousel, copy the next slide's item in the slide.
    // Do the same for the next, next item.
    jQuery('.multi-item-carousel .item').each(function () {
      let next = jQuery(this).next();
      if (!next.length) {
        next = jQuery(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo(jQuery(this));

      if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo(jQuery(this));
      } else {
        jQuery(this).siblings(':first').children(':first-child').clone().appendTo(jQuery(this));
      }
    });
  }

Answer 1

您可以使用 ngx-carousel 为每张幻灯片移动3个项目。请按照以下步骤操作：

执行 npm install ngx-carousel --save 。
在您的应用模块中包含CarouselModule：

import { NgxCarouselModule } from 'ngx-carousel';
import 'hammerjs';

@NgModule({
  imports: [
    NgxCarouselModule
  ],
})
export class AppModule { }

然后在您的组件中使用：

import { Component } from '@angular/core';
import { NgxCarousel } from 'ngx-carousel';

@Component({
  selector: 'sample',
  template: `
    <ngx-carousel
        [inputs]="carouselOne"
        (carouselLoad)="myfunc($event)">
          <ngx-item NgxCarouselItem>
            ....
          </ngx-item>
          <ngx-item NgxCarouselItem>
            ....
          </ngx-item>
          <ngx-item NgxCarouselItem>
            ....
          </ngx-item>
          <button NgxCarouselPrev class='leftRs'>&lt;</button>
          <button NgxCarouselNext class='rightRs'>&gt;</button>
    </ngx-carousel>
  `,
})
export class SampleComponent implements OnInit {

  public carouselOne: NgxCarousel;

  ngOnInit() {
    this.carouselOne = {
      grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
      slide: 1,
      speed: 400,
      interval: 4000,
      point: {
        visible: true
      },
      load: 2,
      touch: true,
      loop: true,
      custom: 'banner'
    }
  }

  public myfunc(event: Event) {
     // carouselLoad will trigger this funnction when your load value reaches
     // it is helps to load the data by parts to increase the performance of the app
     // must use feature to all carousel
  }


}

有关详细信息，请浏览https://www.npmjs.com/package/ngx-carousel和Check this demo here to find all possibilities available based on number of items moved per scroll.

带有Angular 4+的多项旋转木马

1 个答案: