CODEWITHSUNDEEP
angulartwitter-bootstrap
Raphaël VO
Raphaël VO

Reputation: 2630

Multiple item carousel with Angular 4+

I am using Angular 4 with ngx-bootstrap. To display one slide per time with bootstrap carousel, it worked very okay. But currently I need to display about 3 items per slide, and each time move only one slide. Is there any Angular way to achieve this purpose?

An example of multiple items with bootstrap carousel can see here: https://codepen.io/kchez/pen/jWzqjo

I tried to follow the same work by calling the function inside ngAfterViewChecked but it didn't work as expected.

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));
      }
    });
  }

Upvotes: 1

Views: 12668

Answers (1)

Saniya syed qureshi
Saniya syed qureshi

Reputation: 3147

You can use ngx-carousel in order to move 3 items per slide. Follow these steps:

  1. Perform npm install ngx-carousel --save.
  2. Include CarouselModule in your app module:
import { NgxCarouselModule } from 'ngx-carousel';
import 'hammerjs';

@NgModule({
  imports: [
    NgxCarouselModule
  ],
})
export class AppModule { }
  1. Then use in your component:
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
  }


}

For more detail go through https://www.npmjs.com/package/ngx-carousel and Check this demo here to find all possibilities available based on number of items moved per scroll.

Upvotes: 1

Related Questions