ngu-carousel

Angular Universal carousel

Note: This carousel doesn't include any CSS. go and customize CSS for buttons, items except ngucarousel and ngucarousel-inner

Demo

Demo available in Stackblitz Here

Demo available Here

Installation

ngu-carousel supports touch actions and requires hammerjs to be installed before the ngu-carousel is installed.

Angular Version	ngu-carousel Version
Angular >= 18	npm i --save @ngu/carousel@18
Angular >= 17	npm i --save @ngu/carousel@9.0.0
Angular >= 16 standalone	npm i --save @ngu/carousel@8.0.0
Angular >= 16	npm i --save @ngu/carousel@7.2.0
Angular >= 15	npm i --save @ngu/carousel@7.0.0
Angular >= 14	npm i --save @ngu/carousel@6.0.0
Angular >= 13	npm i --save @ngu/carousel@5.0.0
Angular >= 12	npm i --save @ngu/carousel@4.0.0
Angular >= 10	npm i --save @ngu/carousel@3.0.2
Angular = 9	npm i --save @ngu/carousel@2.1.0
Angular < 9	npm i --save @ngu/carousel@1.5.5

Usage

1. Include Carousel needed parts in your module or component (all carousel components and directives are standalone):

1import {
2  NguCarousel,
3  NguCarouselDefDirective,
4  NguCarouselNextDirective,
5  NguCarouselPrevDirective,
6  NguItemComponent
7} from '@ngu/carousel';
8
9@NgModule({
10  imports: [
11    NguCarousel,
12    NguTileComponent,
13    NguCarousel,
14    NguCarouselDefDirective,
15    NguCarouselNextDirective,
16    NguCarouselPrevDirective,
17    NguItemComponent
18  ]
19})
20export class AppModule {}
21
22OR
23
24@Component({
25  imports: [
26    NguCarousel,
27    NguTileComponent,
28    NguCarousel,
29    NguCarouselDefDirective,
30    NguCarouselNextDirective,
31    NguCarouselPrevDirective,
32    NguItemComponent
33  ],
34  standalone: true
35})
36export class AppComponent {}

2. Then use in your component:

1import { Component, OnInit } from '@angular/core';
2import { NguCarouselConfig } from '@ngu/carousel';
3
4@Component({
5  selector: 'sample',
6  template: `
7    <ngu-carousel #myCarousel [inputs]="carouselTile" [dataSource]="carouselTileItems">
8  <ngu-tile *nguCarouselDef="let item; let i = index">
9
10    <ngu-carousel #myCarousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad(i)" [dataSource]="carouselTiles[i]">
11      <ngu-tile *nguCarouselDef="let item; let j = index">
12        <div class="tile" [style.background]="'url(' + item + ')'" style="min-height: 200px">
13          <h1>{{j}}</h1>
14        </div>
15      </ngu-tile>
16      <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst() ? 0.5:1">&lt;</button>
17      <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast() ? 0.5:1">&gt;</button>
18      <ul class="myPoint" NguCarouselPoint>
19        <li *ngFor="let j of myCarousel.pointNumbers(); let j = index" [class.active]="j==myCarousel.activePoint()" (click)="myCarousel.moveTo(j)"
20          [style.background]="'url(' + carouselTileItems[j] + ')'"></li>
21      </ul>
22    </ngu-carousel>
23
24  </ngu-tile>
25  <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst() ? 0.5:1">&lt;</button>
26  <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast() ? 0.5:1">&gt;</button>
27  <ul class="myPoint" NguCarouselPoint>
28    <li *ngFor="let i of myCarousel.pointNumbers(); let i = index" [class.active]="i==myCarousel.activePoint()" (click)="myCarousel.moveTo(i)"
29      [style.background]="'url(' + carouselTileItems[i] + ')'"></li>
30  </ul>
31</ngu-carousel>
32
33  `,
34})
35export class SampleComponent implements OnInit {
36  imgags = [
37    'assets/bg.jpg',
38    'assets/car.png',
39    'assets/canberra.jpg',
40    'assets/holi.jpg'
41  ];
42  public carouselTileItems: Array<any> = [0, 1, 2, 3, 4, 5];
43  public carouselTiles = {
44    0: [],
45    1: [],
46    2: [],
47    3: [],
48    4: [],
49    5: []
50  };
51  public carouselTile: NguCarouselConfig = {
52    grid: { xs: 1, sm: 1, md: 3, lg: 3, all: 0 },
53    slide: 3,
54    speed: 250,
55    point: {
56      visible: true
57    },
58    load: 2,
59    velocity: 0,
60    touch: true,
61    easing: 'cubic-bezier(0, 0, 0.2, 1)'
62  };
63  constructor() {}
64
65  ngOnInit() {
66    this.carouselTileItems.forEach(el => {
67      this.carouselTileLoad(el);
68    });
69  }
70
71  public carouselTileLoad(j) {
72    // console.log(this.carouselTiles[j]);
73    const len = this.carouselTiles[j].length;
74    if (len <= 30) {
75      for (let i = len; i < len + 15; i++) {
76        this.carouselTiles[j].push(
77          this.imgags[Math.floor(Math.random() * this.imgags.length)]
78        );
79      }
80    }
81  }
82}

Input Interface

1export class NguCarouselStore {
2  type: string;
3  deviceType: DeviceType;
4  token: string;
5  items: number;
6  load: number;
7  deviceWidth: number;
8  carouselWidth: number;
9  itemWidth: number;
10  visibleItems: ItemsControl;
11  slideItems: number;
12  itemWidthPer: number;
13  itemLength: number;
14  currentSlide: number;
15  easing: string;
16  speed: number;
17  transform: Transfrom;
18  loop: boolean;
19  dexVal: number;
20  touchTransform: number;
21  touch: Touch;
22  isEnd: boolean;
23  isFirst: boolean;
24  isLast: boolean;
25  RTL: boolean;
26  vertical: Vertical;
27}
28export type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'all';
29
30export class ItemsControl {
31  start: number;
32  end: number;
33}
34
35export class Vertical {
36  enabled: boolean;
37  height: number;
38}
39
40export class Touch {
41  active?: boolean;
42  swipe: string;
43  velocity: number;
44}
45
46export class NguCarouselConfig {
47  grid: Transfrom;
48  gridBreakpoints?: Breakpoints;
49  slide?: number;
50  speed?: number;
51  interval?: CarouselInterval;
52  animation?: Animate;
53  point?: Point;
54  type?: string;
55  load?: number;
56  custom?: Custom;
57  loop?: boolean;
58  touch?: boolean;
59  easing?: string;
60  RTL?: boolean;
61  button?: NguButton;
62  vertical?: Vertical;
63  velocity?: number;
64}
65
66export class Grid {
67  xs: number;
68  sm: number;
69  md: number;
70  lg: number;
71  xl: number;
72  all: number;
73}
74
75export interface Point {
76  visible: boolean;
77  hideOnSingleSlide?: boolean;
78}
79
80export type Custom = 'banner';
81export type Animate = 'lazy';

Command	Type	Required	Description
grid	Object	Yes	xs - mobile, sm - tablet, md - desktop, lg - large desktops, xl - extra large desktops, all - fixed width (When you use all make others 0 and vice versa)
gridBreakpoints	Object	optional	Determines the browser width in pixels that the grid displays the intended number of tiles. default: {sm: 768, md: 992, lg: 1200, xl: 1200}
slide	number	optional	It is used to slide the number items on click
speed	milliseconds	optional	It is used for time taken to slide the number items
interval	milliseconds	optional	It is used to make the carousel auto slide with given value. interval defines the interval between slides
load	number	optional	It is used to load the items similar to pagination. The carousel will trigger the carouselLoad function to load another set of items. It will help you to improve the performance of the app.(carouselLoad)="myfunc($event)"
point.visible	boolean	optional	It is used to indicate no. of slides and also shows the current active slide.
point.hideOnSingleSlide	boolean	optional	It is used to hide the point indicator when slide is less than one.
touch	boolean	optional	It is used to active touch support to the carousel.
easing	string	optional	It is used to define the easing style of the carousel. Only define the ease name without any timing like ease,ease-in
loop	boolean	optional	It is used to loop the ngu-item ngu-tile. It must be true for interval
animation	string	optional	It is used to animate the sliding items. currently it only supports lazy. more coming soon and also with custom CSS animation option
custom	string	optional	It is you to define the purpose of the carousel. Currently, it only supports banner.
RTL	boolean	optional	This option enables the rtl direction and acts as rtl. By default it is set to ltr
vertical.enabled	boolean	optional	This option enable the vertical direction
vertical.height	number	optional	This option is used to set the height of the carousel

Custom CSS for Point

1<ul class="ngucarouselPoint">
2  <li *ngFor="let i of pointNumbers; let i = index" [class.active]="i==pointers"></li>
3</ul>

This is HTML I'm using in the carousel. Add your own CSS according to this elements in pointStyles. check below guide for more details.

1<ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)" (carouselLoad)="loadItemsFn()">
2</ngu-carousel>

• inputs is an Input and It accepts NguCarouselConfig.
• onMove is an Output which triggered on every slide before start and it will emit $event as NguCarouselStore object.
• carouselLoad is an Output which triggered when slide reaches the end on items based on inputs load.

Getstarted guide

Banner with Custom point style

1import { Component } from '@angular/core';
2import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
3
4@Component({
5  selector: 'app-carousel',
6  template: `
7    <ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)" [trackBy]="trackCarousel">
8      <ngu-item NguCarouselItem class="bannerStyle">
9        <h1>1</h1>
10      </ngu-item>
11
12      <ngu-item NguCarouselItem class="bannerStyle">
13        <h1>2</h1>
14      </ngu-item>
15
16      <ngu-item NguCarouselItem class="bannerStyle">
17        <h1>3</h1>
18      </ngu-item>
19
20      <button NguCarouselPrev class="leftRs">&lt;</button>
21      <button NguCarouselNext class="rightRs">&gt;</button>
22    </ngu-carousel>
23  `,
24  styles: [
25    `
26      .bannerStyle h1 {
27        background-color: #ccc;
28        min-height: 300px;
29        text-align: center;
30        line-height: 300px;
31      }
32      .leftRs {
33        position: absolute;
34        margin: auto;
35        top: 0;
36        bottom: 0;
37        width: 50px;
38        height: 50px;
39        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
40        border-radius: 999px;
41        left: 0;
42      }
43
44      .rightRs {
45        position: absolute;
46        margin: auto;
47        top: 0;
48        bottom: 0;
49        width: 50px;
50        height: 50px;
51        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
52        border-radius: 999px;
53        right: 0;
54      }
55    `
56  ]
57})
58export class Sample implements OnInit {
59  ngOnInit() {
60    this.carouselBanner = {
61      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl: 1, all: 0 },
62      slide: 1,
63      speed: 400,
64      interval: {
65        timing: 3000,
66        initialDelay: 1000
67      },
68      point: {
69        visible: true
70      },
71      load: 2,
72      loop: true,
73      touch: true
74    };
75  }
76
77  /* It will be triggered on every slide*/
78  onmoveFn(data: NguCarouselStore) {
79    console.log(data);
80  }
81
82  trackCarousel(_, item) {
83    return item;
84  }
85}

Banner with Vertical carousel

1import { Component } from '@angular/core';
2import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';
3
4@Component({
5  selector: 'app-carousel',
6  template: `
7    <ngu-carousel
8      [inputs]="carouselBanner"
9      (onMove)="onmoveFn($event)">
10
11          <ngu-item NguCarouselItem class="bannerStyle">
12              <h1>1</h1>
13          </ngu-item>
14
15          <ngu-item NguCarouselItem class="bannerStyle">
16              <h1>2</h1>
17          </ngu-item>
18
19          <ngu-item NguCarouselItem class="bannerStyle">
20              <h1>3</h1>
21          </ngu-item>
22
23          <button NguCarouselPrev class='leftRs'>&lt;</button>
24          <button NguCarouselNext class='rightRs'>&gt;</button>
25    </ngu-carousel>
26  `,
27  styles: [
28    `
29    .bannerStyle h1 {
30        background-color: #ccc;
31        min-height: 300px;
32        text-align: center;
33        line-height: 300px;
34    }
35    .leftRs {
36        position: absolute;
37        margin: auto;
38        top: 0;
39        bottom: 0;
40        width: 50px;
41        height: 50px;
42        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
43        border-radius: 999px;
44        left: 0;
45    }
46
47    .rightRs {
48        position: absolute;
49        margin: auto;
50        top: 0;
51        bottom: 0;
52        width: 50px;
53        height: 50px;
54        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
55        border-radius: 999px;
56        right: 0;
57    }
58
59    .ngucarouselPoint {
60      list-style-type: none;
61      text-align: center;
62      padding: 12px;
63      margin: 0;
64      white-space: nowrap;
65      overflow: auto;
66      position: absolute;
67      width: 100%;
68      bottom: 20px;
69      left: 0;
70      box-sizing: border-box;
71    }
72    .ngucarouselPoint li {
73      display: inline-block;
74      border-radius: 999px;
75      background: rgba(255, 255, 255, 0.55);
76      padding: 5px;
77      margin: 0 3px;
78      transition: .4s ease all;
79    }
80    .ngucarouselPoint li.active {
81        background: white;
82        width: 10px;
83    }
84  `
85  ]
86})
87export class Sample implements OnInit {
88  ngOnInit() {
89    this.carouselBanner = {
90      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl:1, all: 0 },
91      slide: 1,
92      speed: 400,
93      interval: 4000,
94      point: {
95        visible: true
96      },
97      load: 2,
98      loop: true,
99      touch: true, // touch is not currently in active for vertical carousel, will enable it in future build
100      vertical {
101        enabled: true,
102        height: 400
103      }
104    };
105  }
106
107  /* It will be triggered on every slide*/
108  onmoveFn(data: NguCarousel) {
109    console.log(data);
110  }
111}

Tile with Carousel Control

1import { Component } from '@angular/core';
2import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';
3
4@Component({
5  selector: 'app-carousel',
6  template: `
7    <ngu-carousel #carousel
8      [inputs]="carouselTile"
9      (carouselLoad)="carouselTileLoad($event)">
10
11            <ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
12                <h1>{{Tile + 1}}</h1>
13            </ngu-tile>
14
15          <button NguCarouselPrev class='leftRs'>&lt;</button>
16          <button NguCarouselNext class='rightRs'>&gt;</button>
17    </ngu-carousel>
18    <button (click)="resetFn()">Reset</button>
19  `,
20  styles: [`
21
22    h1{
23      min-height: 200px;
24      background-color: #ccc;
25      text-align: center;
26      line-height: 200px;
27    }
28    .leftRs {
29        position: absolute;
30        margin: auto;
31        top: 0;
32        bottom: 0;
33        width: 50px;
34        height: 50px;
35        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
36        border-radius: 999px;
37        left: 0;
38    }
39
40    .rightRs {
41        position: absolute;
42        margin: auto;
43        top: 0;
44        bottom: 0;
45        width: 50px;
46        height: 50px;
47        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
48        border-radius: 999px;
49        right: 0;
50    }
51  `]
52})
53export class Sample implements OnInit {
54  private carouselToken: string;
55
56  public carouselTileItems: Array<any>;
57  public carouselTile: NguCarouselConfig;
58  @ViewChild('carousel') carousel: NguCarousel;
59
60  constructor() {  }
61
62  ngOnInit(){
63    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
64
65    this.carouselTile = {
66      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
67      slide: 2,
68      speed: 400,
69      animation: 'lazy',
70      point: {
71        visible: true
72      },
73      load: 2,
74      touch: true,
75      easing: 'ease'
76    }
77  }
78
79  initDataFn(key: NguCarouselStore) {
80    this.carouselToken = key.token;
81  }
82
83  resetFn() {
84    this.carousel.reset(this.carouselToken);
85  }
86
87  moveToSlide() {
88    this.carousel.moveToSlide(this.carouselToken, 2, false);
89  }
90
91  public carouselTileLoad(evt: any) {
92
93    const len = this.carouselTileItems.length
94    if (len <= 30) {
95      for (let i = len; i < len + 10; i++) {
96        this.carouselTileItems.push(i);
97      }
98    }
99
100  }
101
102     // carouselLoad will trigger this function when your load value reaches
103     // it helps to load the data by parts to increase the performance of the app
104     // must use feature to all carousel
105
106}

Tile with custom point style

1import { Component } from '@angular/core';
2import { NguCarousel } from '@ngu/carousel';
3
4@Component({
5  selector: 'app-carousel',
6  template: `
7    <ngu-carousel
8      [inputs]="carouselTile"
9      (carouselLoad)="carouselTileLoad($event)">
10
11            <ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
12                <h1>{{Tile + 1}}</h1>
13            </ngu-tile>
14
15          <button NguCarouselPrev class='leftRs'>&lt;</button>
16          <button NguCarouselNext class='rightRs'>&gt;</button>
17    </ngu-carousel>
18  `,
19  styles: [`
20
21    h1{
22      min-height: 200px;
23      background-color: #ccc;
24      text-align: center;
25      line-height: 200px;
26    }
27    .leftRs {
28        position: absolute;
29        margin: auto;
30        top: 0;
31        bottom: 0;
32        width: 50px;
33        height: 50px;
34        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
35        border-radius: 999px;
36        left: 0;
37    }
38
39    .rightRs {
40        position: absolute;
41        margin: auto;
42        top: 0;
43        bottom: 0;
44        width: 50px;
45        height: 50px;
46        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
47        border-radius: 999px;
48        right: 0;
49    }
50  `]
51})
52export class Sample implements OnInit {
53
54  public carouselTileItems: Array<any>;
55  public carouselTile: NguCarousel;
56
57  ngOnInit(){
58    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
59
60    this.carouselTile = {
61      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
62      slide: 2,
63      speed: 400,
64      animation: 'lazy',
65      point: {
66        visible: true,
67        pointStyles: `
68          .ngucarouselPoint {
69            list-style-type: none;
70            text-align: center;
71            padding: 12px;
72            margin: 0;
73            white-space: nowrap;
74            overflow: auto;
75            box-sizing: border-box;
76          }
77          .ngucarouselPoint li {
78            display: inline-block;
79            border-radius: 50%;
80            border: 2px solid rgba(0, 0, 0, 0.55);
81            padding: 4px;
82            margin: 0 3px;
83            transition-timing-function: cubic-bezier(.17, .67, .83, .67);
84            transition: .4s;
85          }
86          .ngucarouselPoint li.active {
87              background: #6b6b6b;
88              transform: scale(1.2);
89          }
90        `
91      },
92      load: 2,
93      touch: true,
94      easing: 'ease'
95    }
96  }
97
98  public carouselTileLoad(evt: any) {
99
100    const len = this.carouselTileItems.length
101    if (len <= 30) {
102      for (let i = len; i < len + 10; i++) {
103        this.carouselTileItems.push(i);
104      }
105    }
106
107  }
108
109     // carouselLoad will trigger this function when your load value reaches
110     // it helps to load the data by parts to increase the performance of the app
111     // must use feature to all carousel
112
113}

License

MIT license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Code Veins 💻	Marcin Czachurski 💻	Alexander Buiko 💻	Frido Koch 💻	Giorgio Modoni 💻	faran312 💻	Euan Goddard 💻
Santosh Yadav 💻	Tiago Magalhães 📖	Sam Vloeberghs 📖	rat-matheson 💻	Brandon Largeau 💻	Artur Androsovych 💻	chivesrs 💻
Luca Peruzzo 💻	Mateusz Stefańczyk 💻	Matthieu Riegler 👀	Sasidharan SD 📖

This project follows the all-contributors specification. Contributions of any kind welcome!