uiuniversal / ngu-carousel

Angular Universal carousel

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 >= 17	npm i --save @ngu/carousel@latest
Angular >= 16 standalone	npm i --save @ngu/[email protected]
Angular >= 16	npm i --save @ngu/[email protected]
Angular >= 15	npm i --save @ngu/[email protected]
Angular >= 14	npm i --save @ngu/[email protected]
Angular >= 13	npm i --save @ngu/[email protected]
Angular >= 12	npm i --save @ngu/[email protected]
Angular >= 10	npm i --save @ngu/[email protected]
Angular = 9	npm i --save @ngu/[email protected]
Angular < 9	npm i --save @ngu/[email protected]

Usage

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

import {
  NguCarousel,
  NguCarouselDefDirective,
  NguCarouselNextDirective,
  NguCarouselPrevDirective,
  NguItemComponent
} from '@ngu/carousel';

@NgModule({
  imports: [
    NguCarousel,
    NguTileComponent,
    NguCarousel,
    NguCarouselDefDirective,
    NguCarouselNextDirective,
    NguCarouselPrevDirective,
    NguItemComponent
  ]
})
export class AppModule {}

OR

@Component({
  imports: [
    NguCarousel,
    NguTileComponent,
    NguCarousel,
    NguCarouselDefDirective,
    NguCarouselNextDirective,
    NguCarouselPrevDirective,
    NguItemComponent
  ],
  standalone: true
})
export class AppComponent {}

2. Then use in your component:

import { Component, OnInit } from '@angular/core';
import { NguCarouselConfig } from '@ngu/carousel';

@Component({
  selector: 'sample',
  template: `
    <ngu-carousel #myCarousel [inputs]="carouselTile" [dataSource]="carouselTileItems">
  <ngu-tile *nguCarouselDef="let item; let i = index">

    <ngu-carousel #myCarousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad(i)" [dataSource]="carouselTiles[i]">
      <ngu-tile *nguCarouselDef="let item; let j = index">
        <div class="tile" [style.background]="'url(' + item + ')'" style="min-height: 200px">
          <h1>{{j}}</h1>
        </div>
      </ngu-tile>
      <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1">&lt;</button>
      <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">&gt;</button>
      <ul class="myPoint" NguCarouselPoint>
        <li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"
          [style.background]="'url(' + carouselTileItems[j] + ')'"></li>
      </ul>
    </ngu-carousel>

  </ngu-tile>
  <button NguCarouselPrev class="leftRs" [style.opacity]="myCarousel.isFirst ? 0.5:1">&lt;</button>
  <button NguCarouselNext class="rightRs" [style.opacity]="myCarousel.isLast ? 0.5:1">&gt;</button>
  <ul class="myPoint" NguCarouselPoint>
    <li *ngFor="let i of myCarousel.pointNumbers; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"
      [style.background]="'url(' + carouselTileItems[i] + ')'"></li>
  </ul>
</ngu-carousel>

  `,
})
export class SampleComponent implements OnInit {
  imgags = [
    'assets/bg.jpg',
    'assets/car.png',
    'assets/canberra.jpg',
    'assets/holi.jpg'
  ];
  public carouselTileItems: Array<any> = [0, 1, 2, 3, 4, 5];
  public carouselTiles = {
    0: [],
    1: [],
    2: [],
    3: [],
    4: [],
    5: []
  };
  public carouselTile: NguCarouselConfig = {
    grid: { xs: 1, sm: 1, md: 3, lg: 3, all: 0 },
    slide: 3,
    speed: 250,
    point: {
      visible: true
    },
    load: 2,
    velocity: 0,
    touch: true,
    easing: 'cubic-bezier(0, 0, 0.2, 1)'
  };
  constructor() {}

  ngOnInit() {
    this.carouselTileItems.forEach(el => {
      this.carouselTileLoad(el);
    });
  }

  public carouselTileLoad(j) {
    // console.log(this.carouselTiles[j]);
    const len = this.carouselTiles[j].length;
    if (len <= 30) {
      for (let i = len; i < len + 15; i++) {
        this.carouselTiles[j].push(
          this.imgags[Math.floor(Math.random() * this.imgags.length)]
        );
      }
    }
  }
}

Input Interface

export class NguCarouselStore {
  type: string;
  deviceType: DeviceType;
  token: string;
  items: number;
  load: number;
  deviceWidth: number;
  carouselWidth: number;
  itemWidth: number;
  visibleItems: ItemsControl;
  slideItems: number;
  itemWidthPer: number;
  itemLength: number;
  currentSlide: number;
  easing: string;
  speed: number;
  transform: Transfrom;
  loop: boolean;
  dexVal: number;
  touchTransform: number;
  touch: Touch;
  isEnd: boolean;
  isFirst: boolean;
  isLast: boolean;
  RTL: boolean;
  vertical: Vertical;
}
export type DeviceType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'all';

export class ItemsControl {
  start: number;
  end: number;
}

export class Vertical {
  enabled: boolean;
  height: number;
}

export class Touch {
  active?: boolean;
  swipe: string;
  velocity: number;
}

export class NguCarouselConfig {
  grid: Transfrom;
  gridBreakpoints?: Breakpoints;
  slide?: number;
  speed?: number;
  interval?: CarouselInterval;
  animation?: Animate;
  point?: Point;
  type?: string;
  load?: number;
  custom?: Custom;
  loop?: boolean;
  touch?: boolean;
  easing?: string;
  RTL?: boolean;
  button?: NguButton;
  vertical?: Vertical;
  velocity?: number;
}

export class Grid {
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
  all: number;
}

export interface Point {
  visible: boolean;
  hideOnSingleSlide?: boolean;
}

export type Custom = 'banner';
export 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

<ul class="ngucarouselPoint">
  <li *ngFor="let i of pointNumbers; let i = index" [class.active]="i==pointers"></li>
</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.

<ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)" (carouselLoad)="loadItemsFn()">
</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

import { Component } from '@angular/core';
import { NguCarousel, NguCarouselStore } from '@ngu/carousel';

@Component({
  selector: 'app-carousel',
  template: `
    <ngu-carousel [inputs]="carouselBanner" (onMove)="onmoveFn($event)" [trackBy]="trackCarousel">
      <ngu-item NguCarouselItem class="bannerStyle">
        <h1>1</h1>
      </ngu-item>

      <ngu-item NguCarouselItem class="bannerStyle">
        <h1>2</h1>
      </ngu-item>

      <ngu-item NguCarouselItem class="bannerStyle">
        <h1>3</h1>
      </ngu-item>

      <button NguCarouselPrev class="leftRs">&lt;</button>
      <button NguCarouselNext class="rightRs">&gt;</button>
    </ngu-carousel>
  `,
  styles: [
    `
      .bannerStyle h1 {
        background-color: #ccc;
        min-height: 300px;
        text-align: center;
        line-height: 300px;
      }
      .leftRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
        border-radius: 999px;
        left: 0;
      }

      .rightRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, 0.3);
        border-radius: 999px;
        right: 0;
      }
    `
  ]
})
export class Sample implements OnInit {
  ngOnInit() {
    this.carouselBanner = {
      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl: 1, all: 0 },
      slide: 1,
      speed: 400,
      interval: {
        timing: 3000,
        initialDelay: 1000
      },
      point: {
        visible: true
      },
      load: 2,
      loop: true,
      touch: true
    };
  }

  /* It will be triggered on every slide*/
  onmoveFn(data: NguCarouselStore) {
    console.log(data);
  }

  trackCarousel(_, item) {
    return item;
  }
}

Banner with Vertical carousel

import { Component } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';

@Component({
  selector: 'app-carousel',
  template: `
    <ngu-carousel
      [inputs]="carouselBanner"
      (onMove)="onmoveFn($event)">

          <ngu-item NguCarouselItem class="bannerStyle">
              <h1>1</h1>
          </ngu-item>

          <ngu-item NguCarouselItem class="bannerStyle">
              <h1>2</h1>
          </ngu-item>

          <ngu-item NguCarouselItem class="bannerStyle">
              <h1>3</h1>
          </ngu-item>

          <button NguCarouselPrev class='leftRs'>&lt;</button>
          <button NguCarouselNext class='rightRs'>&gt;</button>
    </ngu-carousel>
  `,
  styles: [
    `
    .bannerStyle h1 {
        background-color: #ccc;
        min-height: 300px;
        text-align: center;
        line-height: 300px;
    }
    .leftRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        left: 0;
    }

    .rightRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        right: 0;
    }

    .ngucarouselPoint {
      list-style-type: none;
      text-align: center;
      padding: 12px;
      margin: 0;
      white-space: nowrap;
      overflow: auto;
      position: absolute;
      width: 100%;
      bottom: 20px;
      left: 0;
      box-sizing: border-box;
    }
    .ngucarouselPoint li {
      display: inline-block;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.55);
      padding: 5px;
      margin: 0 3px;
      transition: .4s ease all;
    }
    .ngucarouselPoint li.active {
        background: white;
        width: 10px;
    }
  `
  ]
})
export class Sample implements OnInit {
  ngOnInit() {
    this.carouselBanner = {
      grid: { xs: 1, sm: 1, md: 1, lg: 1, xl:1, all: 0 },
      slide: 1,
      speed: 400,
      interval: 4000,
      point: {
        visible: true
      },
      load: 2,
      loop: true,
      touch: true, // touch is not currently in active for vertical carousel, will enable it in future build
      vertical {
        enabled: true,
        height: 400
      }
    };
  }

  /* It will be triggered on every slide*/
  onmoveFn(data: NguCarousel) {
    console.log(data);
  }
}

Tile with Carousel Control

import { Component } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';

@Component({
  selector: 'app-carousel',
  template: `
    <ngu-carousel #carousel
      [inputs]="carouselTile"
      (carouselLoad)="carouselTileLoad($event)">

            <ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
                <h1>{{Tile + 1}}</h1>
            </ngu-tile>

          <button NguCarouselPrev class='leftRs'>&lt;</button>
          <button NguCarouselNext class='rightRs'>&gt;</button>
    </ngu-carousel>
    <button (click)="resetFn()">Reset</button>
  `,
  styles: [`

    h1{
      min-height: 200px;
      background-color: #ccc;
      text-align: center;
      line-height: 200px;
    }
    .leftRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        left: 0;
    }

    .rightRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        right: 0;
    }
  `]
})
export class Sample implements OnInit {
  private carouselToken: string;

  public carouselTileItems: Array<any>;
  public carouselTile: NguCarouselConfig;
  @ViewChild('carousel') carousel: NguCarousel;

  constructor() {  }

  ngOnInit(){
    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

    this.carouselTile = {
      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
      slide: 2,
      speed: 400,
      animation: 'lazy',
      point: {
        visible: true
      },
      load: 2,
      touch: true,
      easing: 'ease'
    }
  }

  initDataFn(key: NguCarouselStore) {
    this.carouselToken = key.token;
  }

  resetFn() {
    this.carousel.reset(this.carouselToken);
  }

  moveToSlide() {
    this.carousel.moveToSlide(this.carouselToken, 2, false);
  }

  public carouselTileLoad(evt: any) {

    const len = this.carouselTileItems.length
    if (len <= 30) {
      for (let i = len; i < len + 10; i++) {
        this.carouselTileItems.push(i);
      }
    }

  }

     // carouselLoad will trigger this function when your load value reaches
     // it helps to load the data by parts to increase the performance of the app
     // must use feature to all carousel

}

Tile with custom point style

import { Component } from '@angular/core';
import { NguCarousel } from '@ngu/carousel';

@Component({
  selector: 'app-carousel',
  template: `
    <ngu-carousel
      [inputs]="carouselTile"
      (carouselLoad)="carouselTileLoad($event)">

            <ngu-tile NguCarouselItem *ngFor="let Tile of carouselTileItems">
                <h1>{{Tile + 1}}</h1>
            </ngu-tile>

          <button NguCarouselPrev class='leftRs'>&lt;</button>
          <button NguCarouselNext class='rightRs'>&gt;</button>
    </ngu-carousel>
  `,
  styles: [`

    h1{
      min-height: 200px;
      background-color: #ccc;
      text-align: center;
      line-height: 200px;
    }
    .leftRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        left: 0;
    }

    .rightRs {
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
        border-radius: 999px;
        right: 0;
    }
  `]
})
export class Sample implements OnInit {

  public carouselTileItems: Array<any>;
  public carouselTile: NguCarousel;

  ngOnInit(){
    this.carouselTileItems = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

    this.carouselTile = {
      grid: {xs: 2, sm: 3, md: 3, lg: 5, xl:5, all: 0},
      slide: 2,
      speed: 400,
      animation: 'lazy',
      point: {
        visible: true,
        pointStyles: `
          .ngucarouselPoint {
            list-style-type: none;
            text-align: center;
            padding: 12px;
            margin: 0;
            white-space: nowrap;
            overflow: auto;
            box-sizing: border-box;
          }
          .ngucarouselPoint li {
            display: inline-block;
            border-radius: 50%;
            border: 2px solid rgba(0, 0, 0, 0.55);
            padding: 4px;
            margin: 0 3px;
            transition-timing-function: cubic-bezier(.17, .67, .83, .67);
            transition: .4s;
          }
          .ngucarouselPoint li.active {
              background: #6b6b6b;
              transform: scale(1.2);
          }
        `
      },
      load: 2,
      touch: true,
      easing: 'ease'
    }
  }

  public carouselTileLoad(evt: any) {

    const len = this.carouselTileItems.length
    if (len <= 30) {
      for (let i = len; i < len + 10; i++) {
        this.carouselTileItems.push(i);
      }
    }

  }

     // carouselLoad will trigger this function when your load value reaches
     // it helps to load the data by parts to increase the performance of the app
     // must use feature to all carousel

}

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!

ngu-carousel's Issues

Rxjs 6 error

ERROR in node_modules/@ngu/carousel/src/ngu-carousel.service.d.ts(1,10): error TS2305: Module '".../ui/node_modules/rxjs/Subject"' has no exported member 'Sub
ject'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.

Please update the Rxjs and Angular to version 6.

problem with the speed (maybe with interval also)

I found an issue trying to set the speed to 0 for the carousel.
Even if i change the value,the speed is always the same.
I think there is the same problem with interval.

I made it work by changing the line 293 of the file ngu-carousel.component.js (in src/ngu-carousel folder).

I replaced the code:
this.userData.speed =
with this:
this.data.speed =

So, at the place of userData i put data and now it works.

Can you confirm that this fixes the problem of the speed and also if there is a problem with interval value also?

Specific responsive carousel configurations?

Do you have any roadmap plans to include responsive specific carousel configurations to this component? More specifically the ability to change the carousel properties like slide, animation or load based on the grid size properties?

Variable width tiles?

Do you have any roadmap plans to add variable width support to this? I current like how your slider works and I'd love to use it, but variable width support is a requirement for my project.

Window undefined Hammerjs

When I run application, I get the following message:

})(window, document, 'Hammer');
ReferenceError: window is not defined

This version of the plugin was supposed to solve that problem for the serversided rendering, right?

listener is not a function (ssr)

I'm facing a problem with Server-side rendering

TypeError: this.listener1 is not a function
    at NguCarouselComponent.module.exports.NguCarouselComponent.ngOnDestroy (/var/task/dist/server.js:175618:14)
    at callProviderLifecycles (/var/task/dist/server.js:13032:18)
    at callElementProvidersLifecycles (/var/task/dist/server.js:12997:13)
    at callLifecycleHooksChildrenFirst (/var/task/dist/server.js:12981:17)
    at destroyView (/var/task/dist/server.js:14325:5)
    at callViewAction (/var/task/dist/server.js:14476:13)
    at execEmbeddedViewsAction (/var/task/dist/server.js:14414:17)
    at destroyView (/var/task/dist/server.js:14323:5)
    at callViewAction (/var/task/dist/server.js:14476:13)
    at execComponentViewsAction (/var/task/dist/server.js:14388:13)

Ability to disable and enable touch programatically

I am trying to change the value of the touch to false when I am dragging something inside the carousel card so the entire carousel doesn't get dragged.

Is it Possible to Loop Around?

Need a feature for looping around the images in the carousel, i.e. show images from beginning when reaching the last image, instead of sliding back through the entire list which is very annoying.

Unexpected token import while using ngu-carousel in universal

Hi
I want to use this carousel in universal project. when i run ng serve, it work perfectly.
No problem with build, but when running application using node server it gives following error.

Please help.

ngu-carousel breaks ssr

I'm not getting any errors but ngu-carousel seems to be breaking ssr somehow. I noticed it because the following code wasn't rendering and after removing the carousel from the page it does render.

        <span [innerHtml]="product.body | safe: 'html'"></span>

That code is just before the carousel and everything before that render but that doesn't not does any of the content after the carousel.

Also the carousel isn't rendered server side either.

autoprefixing styles for tiles

Found a bit of an issue trying to get this working on older browsers. I can sort autoprefixing ngucarousel-items by adding the follow to my scss

/deep/ .ngucarousel-items {
  display: flex;
}

but when it comes to the tiles it a bit more complicated as the css for those is created dynamically.

Can anyone suggest a way around this or is it just a case of manually adding your own css for the breakpoints?

Adding html over slider images only works well when clicking next button

I've added some html over each img, but only applies to every slide when you click next button.

First Load:

After clicking next

Html:
<ngu-carousel [inputs]="carouselTileOne" (carouselLoad)="carouselTileOneLoad()"> <ngu-tile NguCarouselItem *ngFor="let tile of carouselTileOneItems; let i = index;"> <div class="wBg"> <div class="label-discount left-20 top-15">-30%</div> <ul class="deal-actions top-15 right-10"> <li class="like-deal"> <span> <i class="fa fa-heart"></i> </span> </li> </ul> <div class="deal-store-logo store-logo"> <img src="assets/images/brands/brand_01.jpg" alt=""> </div> <div class="tile" [style.background]="'url(' + tile + ')'"> <h1>{{i}}</h1> </div> <h4>Tile</h4> <p>content</p> </div> </ngu-tile> <button NguCarouselPrev class="leftRs">&lt;</button> <button NguCarouselNext class="rightRs">&gt;</button> </ngu-carousel>

TS

this.carouselTileOne = { grid: { xs: 2, sm: 3, md: 4, lg: 4, all: 0 }, speed: 600, interval: 0, point: { visible: true, pointStyles:
.ngucarouselPoint {
list-style-type: none;
text-align: center;
padding: 12px;
margin: 0;
white-space: nowrap;
overflow: auto;
box-sizing: border-box;
}
.ngucarouselPoint li {
display: inline-block;
border-radius: 50%;
background: #6b6b6b;
padding: 5px;
margin: 0 3px;
transition: .4s;
}
.ngucarouselPoint li.active {
border: 2px solid rgba(0, 0, 0, 0.55);
transform: scale(1.2);
background: transparent;
}
}, load: 4, loop: false, touch: true, easing: 'ease', animation: 'lazy' };

Demo does not load

https://github-pocj3k.stackblitz.io/

Grammatic error

There is a class Transfrom.

export declare class Transfrom {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    all: number;
}

It probably should be called Transform?

Delay animation

Hi I'm curious if it's possible to delay first slide animation. I've got two sliders next to each other and I want the same animation speed and interval, but I need one of them to start a bit later.

Thanks for your help.

Remove console logs

Hi, you forgot to remove the console logs in NguCarouselComponent.carouselScrollTwo(...) at console.log(this.withAnim). Maybe this was on purpose but it's very annoying.

Thanks!

Cannot read property 'nativeElement' of undefined

While migrating from the ngx-carousel to this one I get this error

Cannot read property 'nativeElement' of undefined
    at NguCarouselComponent.webpackJsonp.../../../../@ngu/carousel/src/ngu-carousel/ngu-carousel.component.js.NguCarouselComponent.ngOnInit (vendor.bundle.js:286)

Scrolling right problem

Hi,

When scrolling to right carousel behavior breaks. See the moving gif below:

At first I though that I was adding empty items to the collection of items. But when I debugged this was not the case.

This is my code

<ngu-carousel [inputs]="typesCarousel">
	<ngu-tile NguCarouselItem *ngFor="let type of types" style="width:auto!important;padding:5px!important;">
		<div class="btn-group" data-toggle="buttons">
			<label class="btn" [ngClass]="(type.Selected === true) ? 'btn-selected' : 'btn-not-selected'" (click)="dataService.typeClicked(type)">
				<input type="checkbox" class="toggle" [value]="type.Name">{{type.Name}}
			</label>
		</div>
	</ngu-tile>

	<span NguCarouselPrev class='carousel-prev-button'>
		<i class="fa fa-arrow-left" aria-hidden="true"></i>
	</span>
	<span NguCarouselNext class='carousel-next-button'>
		<i class="fa fa-arrow-right" aria-hidden="true"></i>
	</span>
</ngu-carousel>

how to override ngx-component in angular 4???????????????

Using moveToSlide in lifeCycle functions breaks the previous button

Using AfterViewChecked and AfterContentChecked to wrap moveToSlide causes the button click for previous to no long function.

ngAfterContentChecked() {
    this.moveToSlide();
  }

  initDataFn(key: NguCarouselStore) {
    this.carouselToken = key.token;
    this.slideItems = key.items;
  }

  moveToSlide() {
    if (this._benefits.length > 0 && !isNaN(this.slideItems)) {
      const slide = Math.round(this._benefits.length / this.slideItems);

      this.carousel.moveToSlide(this.carouselToken, slide, false);
    }
  }```

carousel reset option needed

Cannot read property 'Kbodyvalue' of undefined

Hi, thanks in advance for your help.
I'm trying to use ngu-carousel putting some small cards in every slider. I'm trying to build the cards dynamically with some info on it. When I try to get the properties of one of the items in carouselTileOneItems, always get the same error Cannot read property 'Kbodyvalue' of undefined. my goal is to assign the properties values to the inputs in the app-small-card component.

<ngu-carousel
            [inputs]="carouselOne"
            (carouselLoad)="carouselTileOneLoad()">
              <ngu-item NguCarouselItem *ngFor="let tile of carouselTileOneItems; let i = index;" >

                  {{tile.Kbodyvalue}} 
                  <app-small-card 
                  [bodytext]="'Text'" 
                  [footertext]="'Footer'" 
                  [bodyvalue]="'10.5%'"  
                  [footercolor]="'card-footer bg-c-red'" 
                  [footerimg]="'fa fa-line-chart text-white f-16'" 
                  [footerfontcolor]="'text-white m-b-0'"
                  [bodyimg]="'fa fa-hand-o-down f-28'"
                  [bodyfontcolor]="'text-c-red'"
                  
                  ></app-small-card>
              </ngu-item>
            
              <button NguCarouselPrev class='leftRs'>&lt;</button>
              <button NguCarouselNext class='rightRs'>&gt;</button>
         </ngu-carousel>

demo missing : 404

please put fix the demo link. thank you :)

Experiencing a browser crash while using fixed tile width and when the component is collapsed

I am trying to use this component in a collapsible container and when the component is collapsed, it is causing chrome to crash because of this line of code

this.pointIndex = Math.ceil(Nos / this.data.slideItems);

What is happening is that this.data.slideItems has value zero which causes this.pointIndex to have an infinite value and the loop just after this runs forever and causes the crash.

The problem is happening in case of fixed width tile scenarios and only when they are collapsed because in that case the below statement assigns this.data.items to 0 as this.data.carouselWidth is zero because the component is in a collapsed state

this.data.items = Math.trunc( this.data.carouselWidth / this.userData.grid.all

and that causes the below piece of code to assign this.data.slideItems to zero

this.data.slideItems = +(this.userData.slide < this.data.items ? this.userData.slide : this.data.items);

(In my case userData.slide was 1 but this.data.items turned out to be zero)

It was a bit hard to track in my application as I am trying to reuse your component multiple times on a page and expanding \ collapsing based on user choice.

Hoping this makes sense and that the fix is easy and it is available soon...

on changing orientation slide moves to 0th index instead of current index

Hi,
on line no-264
/* change the active point in carousel /
NguCarouselComponent.prototype.carouselPointActiver = function () {
var i = Math.ceil(this.data.currentSlide / this.data.slideItems);***

While changing orientation of Mobile; here it is assigning my current slide to 0th index instead of current index.

Please suggest on it.

onresize how to reset the grid

My requirement is when I resize my window, I am changing the no of icons, same should be reflect to carousel grid as well.

How to achieve this.

ex: when I load the page I have 8 icons and carousel also showing the 8 icons. After resizing icons changed to 7 but carousel grid icons are not changing.

update code

please update npm code! (i need browser fix)

Angular 6 & rxjs compatability

Hi,

I've just tried this with the new Angular v6.0. I am getting the following error:

ERROR in node_modules/@ngu/carousel/src/ngu-carousel.service.d.ts(1,10): error TS2305: Module '"../node_modules/rxjs/Subject"' has no exported member 'Subject'.

As a temp fix you can install the following package for backward compatibility but it would be good to remove this dependency.

npm install rxjs-compat@6 --save

This Carousel is Universal version of ngx-carousel

download this package with angular 4+

Can be Hammer a dependency of the package itself?

Is there a reason why I need to install ngu-carousel and separately hammerjs ?
If I need a carousel, I want to install the carousel only, not also hammerjs as a second library.

Infinite loop is possible for banners slider????????????????????????????????

Infinite loop is possible for banners slider?

Infinite loop

Would it be possible to make the loop option infinite so when it get to the last slide it continues to the first with scrolling back to opposite direction.

Is it possible to stop the sliding of the items?

I could not find a way to have the slider stopped to the first item. I need to slide to the second item only if I click a button "next" but I could not find a way to do it. Thanks.

Tile item limit issue

Hi,
My config is
{
grid: { xs: 1, sm: 2, md: 4, lg: 4, all: 0 },
slide: 1,
speed: 500,
interval: 10 * 1000,
point: {
visible: true,
pointStyles: `
.ngucarouselPoint {
list-style-type: none;
text-align: center;
padding: 0px;
margin: 0;
white-space: nowrap;
overflow: auto;
position: absolute;
width: 100%;
bottom: -18px;
left: 0;
box-sizing: border-box;
}
.ngucarouselPoint li {
display: inline-block;
border-radius: 999px;
background-color: rgba(128, 128, 128, 0.5);
margin: 0 3.5px;
transition: .4s ease all;

           height:9px;
           width:9px;
           opacity:0.5;
           cursor:pointer;
           background-color: grey;
         }

         .ngucarouselPoint li:hover {
          opacity: 0.85 !important;
          background-color: #676666;
         }
         .ngucarouselPoint li.active {
          background-color: #009ade !important;

          height:10px;
          width:10px;
          opacity: 1;
         }
         .ngucarouselPoint li:only-child {
           display:none;
         }
       `
  },
  load: 1,
  loop: true,
  touch: true
};

I have a dynamic component where the items would vary each time, sometimes 3 or 4 or n. My lg and md config has by default 4 items. If i have only 3 items, the carousal is allocating space for the expected 4th item which will not be available always. Any idea on handling this?

moveToSlide doesn't work on load

I'd like to move to a particular slide when the carousel loads or "move to end" of carousel when the carousel loads

grid information

What does grid do? In the documentation it says
"xs - mobile, sm - tablet, md - desktop, lg - large desktops, all - fixed width (When you use all make others 0 and vise versa)" but it does not explain what it actually does?

Please put ngucarousel-inner back

On the beta version you have removed ngucarousel-inner and added overflow:hidden to the whole carousel. This makes it impossible to position the navigation outside of the container if desired.

Allow custom HTML for points

It would be very helpful to be able to define our own html for the points instead of just the css. For instance, I'd like to be able to show a thumbnail of all the images in the carousel. It seems that the html for the points is hardcoded to be empty li tags though and I haven't found a way to override this.

It is not possible to add class to the `ngu-item` and `ngu-tile`

Adding class to the ngu-item and ngu-tile to the host element gets removed by the carousel

Portrait vs landscape view

If you have an iPad/tablet and for example you have 3 images in carousel. In portrait view you just show one and you have to slide to see the next images. If you slide to the last one and change to landscape view, the slider is now "broken". The issue is the transform css feature, should be translate3d(-0%, 0, 0) and it's not. There's any way to fix this quicly?

Thanks.

Not compatible with angular universal 6

I have the following error for angular universal 6 :

(function (exports, require, module, __filename, __dirname) { import { Component, HostBinding } from '@angular/core';
^^^^^^

SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:616:28)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)

Can't reach last carousel element

I can not access the last item on the right (at least in xs resolutions). I configured the carousel xs grid with two elements and the slide to move in pairs. The two elements never appear complete, only one is complete and the next one just partially.

So for a carousel of n elements, as I move to the right and reach the n-1 element, I can not see the n element at all. If I change the configuration of the carousel in order to slide one item at a time (slide:1) instead of two then I can reach the last item fine.

Here's my carousel configuration and I'm testing it with xs resolutions:

{
      grid: {xs: 2, sm: 3, md: 4, lg: 4, all: 0},
      slide: 2,
      easing: 'ease',
      animation: 'lazy',
      point: {
        visible: false
      },
      touch: true,
      loop: false,
      custom: 'banner'
   }

Keyboard navigation is not working properly.

Are you planing to add support for ADA?

How to hide prev and next button?

Hello,
I want to hide the prev and next button, but when I don't write button tag, cause ERROR TypeError: Cannot read property 'nativeElement' of undefined error. Is there any option or method to hide these button? I didn't found it at documentation.

Thanks for your love and support

NGX or NGU?

Hi, I wanted to understand why did you depreciate the NGX project and started the NGU project. If you can help with this.

Thanks

Using toSlide and resetCarousel

So I've been playing around with the ability to go from a 5 tile panel to (on click) a single panel carousel that pulls up the specific tile one clicked on.
I've been having trouble with this and the closest I've come to a solution is having 2 carousels and using *ngIf (true | false) depending on whether or not a tile was clicked.

The specific part I am now stuck at, is how to open the second, single panel, carousel to the tile that was clicked in the 5 panel carousel. I'm using toSlide and resetCarousel onIt of the single panel carousel but nothing seems to be working as I expect it to and the return statements of toSlide and resetCarousel return undefined (not sure if that's what they're supposed to return)

Any thoughts on how to achieve this?

Thanks,

-Angular version: 5
-Data Source of carousels: array of objects
-Not sure what other useful information to put

Event on selecting any item

Trying to find a way for getting currentSlideIndex on selecting any item. In my use case showing 4 items thumbnail, clicking on any should open selected image in zoomed mode. For this I needed which slide user tapped/clicked on.

For now I modified plugin carousel JS files (which are generated after npm install) and added a custom listener to bind click event on nativeElement. Then with a custom output, making it to emit current data. That gives me currentSlideIndex and I am able to get desired result.

But that isn't a proper solution. So either if you can suggest how to add a getter of current data in plugin with native ng clicks handlers, or any other approach, that will be helpful.

Points don't render after component init

version: 1.4.9-beta-2

Actual behavior
Try this reproduction: https://angular-ngu-carousel-bug.stackblitz.io/

1. Press "Show" button
2. Notice absence of carousel points
3. Pres "Detect Changes"
4. Notice carousel points have rendered
5. Press "Next"
6. Notice active carousel point hasn't changed
7. Pres "Detect Changes"
8. Notice active carousel point has changed

Expected behavior

1. Press "Show" button
2. Carousel points should be rendered
3. Press "Next"
4. Active point should be changed

P.S. In NPM version of library component field activePoint named as activeSlide

Anyone facing issue with angular universal using this carousel?

Touch not working

I have hammerjs imported in my polyfill and touch set to true but when you try and swipe through the carousel it just bounces back.

Sometimes it does works, but not always it like you have to find a special technique to get it to swipe.

I not seeing any errors either.