zouyoushun/ngx-hm-carousel

a light carousel for Angular13+, support mobile touch by hammerJs

ngx-hm-carousel's Issues

Add a speed changer dynamically

I was trying to make a roulette changing the speed input but I think it is constant when you setup it in the html

Is it possible to implement left/right previews of next/previous cards? (check screenshot)

I wanted to know whether it is supported now, by changing some parameters?
or
should I play with CSS to perform something like this?
If using CSS is possible, can someone give some hints how is it doable?

If not, please try to include it in the next release, thanks in advance :)

Carousel does not recreate <article> containers when changing input binding

I'm currently facing an issue by binding the carousel slide creation to a dynamic array that contains a changing number of items and image sizes:

<article class="image-carousel__item" *ngFor="let image of this.imageMap[activeImageType]">
    <img class="image-carousel__item-image" [src]="image.src" />
</article>

Expected behavior would be that the <article> elements would be recreated whenever the bound input array changes, however the current behavior doesn't reflect that and doesn't trigger the size calculations or deletion of no longer needed <article> elements, leading to unexpected behavior like image overflow over the container bounds, etc.

Error in Angular 7

Hello,

With the sample in my application I've got :

ERROR in : Can't bind to 'ngModel' since it isn't a known property of 'ngx-hm-carousel'.

1. If 'ngx-hm-carousel' is an Angular component and it has 'ngModel' input, then verify that it is part
   of this module.
2. If 'ngx-hm-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas'
   of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ngx-hm-carousel
   [ERROR ->][(ngModel)]="index"
   (ngModelChange)="indexChanged($event)"
   [autoplay-speed]="3000"
   ")

Thanks

Disable drag

Is it possible to disable the drag event if the carousel contains only one image?

[Question]: Carousel Example for mat-cards with header content and action buttons

Hi,

do you happen to have a working carousel Example for mat-cards with header content and action buttons somewhere?

Appreciate your help.

thx ;)

Cannot read property 'createEmbeddedView' of undefined

The package was implemented when our project was in Angular 6 but right now we've updated it to Angular 7. I'm not sure if it's related with Angular version but since last week we are getting some strange error saying "Cannot read property 'createEmbeddedView' of undefined" on line when carousel is initialized, which is -> <ngx-hm-carousel *ngIf="config && viewModels"
Carousel is working like before but I would like to get rid off this error. Below you can see printscreen

New effects and more examples

Open issues to study the feasibility of applying new effects by following the guidelines for IOS/Android.

I think maybe it would be interesting to adapt this or use the effects, because it is quite complete and the Angular community has a demand for something (for mobile) like that.

Ref: https://github.com/archriss/react-native-snap-carousel#layouts-and-custom-interpolations

swipe velocity

Hello again,
The HammerJs library, which is used under the hood for the ngx-hm-carousel plugin has the specific parameter velocity . It is a really important parameter if the plugin is used in combination with a pan-zoom - functionality or plugin. With correctly customized velocity, HamerJs is able to recognize which move is a swipe.
The question is: Is there a possibility to manage this parameter for the ngx-hm-carousel? If not, could you please add a swipe-velocity input to the ngx-hm-carousel to have the possibility to manage it?
Thank you in advance
Timo

.

Animation of the scroll-slide effect doesn't work

Hello,
Thanks a lot for the time devotion to creating this plugin.
I have an issue with the scroll effect animation:
To be clear - I've copied your solution from there http://localhost:4200/example/fashion and pasted to my project almost without changes, except instead of to display picture as a style backgroundImage I've used the regular tag img.
For some reason, it doesn't work and I have no idea why.
Could you please help me to handle it.
I use Angular 8.0.0
The code:
html file:

<ngx-hm-carousel
  [(ngModel)]="index"
  (ngModelChange)="indexChanged($event)"
  [infinite]="infinite"
  [data]="pictures"
  [aniTime]="200"
  class="carousel">
 <section ngx-hm-carousel-container class="content">
    <article class="item cursor-pointer visible_important"
             ngx-hm-carousel-item
             *ngFor="let picture of pictures; let i = index">
      <pinch-zoom>
        <img [src]="picture">
      </pinch-zoom>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>
  <ng-template #carouselContent let-avatar let-i="index">
    <article class="item cursor-pointer visible_important"
    >
      <pinch-zoom>
        <img [src]="picture">
      </pinch-zoom>
    </article>
  </ng-template>
  <ng-template #carouselPrev>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_left</i>
    </div>
  </ng-template>
  <ng-template #carouselNext>
    <div class="click-area">
      <i class="material-icons">keyboard_arrow_right</i>
    </div>
  </ng-template>
  <ng-template #carouselDot let-model>
    <div class="ball bg-accent"
         [class.visible]="model.index === model.currentIndex"></div>
  </ng-template>
</ngx-hm-carousel>

companent.ts:

export class CarouselComponent implements {
  index = 0;
  infinite = true;
  directionToggle = true;
  pictures = [
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-1-multi?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-2?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-3?$XXL$&wid=2238&fit=constrain',
    '//images.asos-media.com/products/asos-design-checkerboard-faux-fur-coat/10045678-4?$XXL$&wid=2238&fit=constrain',
  ];

  constructor() {
  }

  indexChanged(index) {
    console.log(index);
  }

  toggleDirection($event) {
    this.direction = this.directionToggle ? 'right' : 'left';
  }
}

scss file:

$transition_time:.2s;

.carousel {
  color:white;
  .content {
    display: flex;

    .item {
      width: 100%;
      display: block;
      // fade
      opacity: 1;

      // using delay to prevent left change show error
      &.fade_animation {
        transition: opacity 0.295s linear $transition_time;
      }

      &.fade_animation_0 {
        transition: opacity 0.295s linear;
      }

      &.visible {
        opacity: 1;
      }

      &:last-child,
      &:first-child
      {
        opacity: 0;
      }

      &.visible_important {
        opacity: 1;
      }

      .img {
        width: 100%;
        display: block;
        background-size: cover;
        background-position: center;
        height: 0;
        padding-bottom: 50%;
      }
    }


  }

  .ball {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: black;
    border: 2px solid;
    opacity: 0.5;

    &.visible {
      opacity: 1;
    }
  }

  .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #ff5252;
  }

  .click-area {
    width: 50px;
    text-align: center;

    i {
      font-size: 3em;
    }
  }
}

font render issue (blurry fonts) if element has transitionX with decimal separator

if an active element in carousel landing in center sometimes its not pixel perfect and have decimal separator in translateX value. this causes blurry fonts in chrome.
I think it's better to round the content grab element translateX value after transition complete.

Infinite loop causing crash with firefox & edge

I am using the carousel just fine in Chrome but when I switched to Firefox or Edge, I am getting an infinite loop in typescript resulting in the whole javascript crashing.

I belive it has to do with the Resize-Observer-Polyfill conflicting with Zone.js leading to an infinite loop of callbacks. When I execute the carousel outside the angular space, it is working just fine (but I can't use my components...).

But I saw in your exemples that you achieved to make it work both in Firefox and Edge, I looked into it but didn't manage to make it works locally.

Thanks for the help!

Edit : After some investigations, the bug only occurs on pages wich its route is a child of the main route.

Support for Angular 12

Hi,
When we try to install the package for angular 12 application facing the below issue.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslib
npm ERR! tslib@"^2.0.0" from the root project
npm ERR! tslib@"^2.1.0" from @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~12.0.5" from the root project
npm ERR! peer @angular/common@">=9.0.0" from [email protected]
npm ERR! node_modules/ngx-hm-carousel
npm ERR! ngx-hm-carousel@"^2.0.0-rc.1" from the root project
npm ERR! 2 more (@angular/core, zone.js)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer tslib@"^1.10.0" from [email protected]
npm ERR! node_modules/ngx-hm-carousel
npm ERR! ngx-hm-carousel@"^2.0.0-rc.1" from the root project

mobile - vertical scroll not working

When touching the carousel container and trying to scroll vertically it doesn't work and nothing happens.

I am using angular material
angular version is 8.1.1

[BUG] Touch on Android - Cordova

Hello,

Firstly, thanks for this fabulous tool ! Simple and efficiency !

I meet a problem with the dots on Android (build cordova). In the next video, you can see the problem. When using the autoplay or the arrows, no problem, but when i touch to change slide, the dot not change...

https://streamable.com/vru69

Thanks,

Regards !

EDIT - I use the last version ;)

Please provide the demo code.

Next and PreviousButton is not showing if i follow the implementation of your demo.

IE 11 Carousel Loop Issue

Hi,
There is a bug in the carousel on internet explorer when the infinite scroll is selected. When all the tiles in carousel are used and it loops to display the first tile the previous tiles disappears which displays empty space and it is not giving feel of infinite looping. PFA image for the example which is presented on documentation when I run it on internet explorer. Is there any possiable fix for this issue?

Thanks in advance.

remove slide dynamically

Hi, how i can remove slide dynamically.
Thanks in advance

can be fade in/out the images?

prod build issue

ERROR in : Unexpected value 'NgxHmCarouselModule in /Users/my-app/node_modules/ngx-hm-carousel/ngx-hm-carousel.d.ts' imported by the module 'ExampleModule in /Users/my-app/src/app/modules/example/example.module.ts'. Please add a @NgModule annotation.

Moving more than 1 slide at a time

I'd like to know if is posible (and how) to move more than one slide at a time.
From what I understood from the docs that's what scroll-num is for, but I couldn't make it work.

Since I'm using the carousel with breakpoints, I'd like to know if is it posible to move as many slides as the current break point is showing:
example:

breakpoint: NgxHmCarouselBreakPointUp[] = [
// move one slide
{
width: 360,
number: 1
},
// move two slides
{
width: 500,
number: 2
},
// move three slides
{
width: 768,
number: 3
},
];

I'm using only the previous and next arrows to move between slides. Not using the dots.

Problem with loop mode on Angular 9

Angular version: 9.1.3
Library version: 2.0.0-rc.1

Issue: Sometimes (sorry, I know its not random, but I can't find the pattern) the library breaks and I can't load the view where the carousel is implemented. I'm not 100% sure, but I think its related with infinite mode being enabled.

Its been some days with this, all help its very appreciated, and thank you in advance :)
I'll provide as much detail as possible, if you need something else, just ask me please.

This is the error:

This is the code implementation:
(There are only 2 slides, that's why I check i === 0 and i === 1)

<ngx-hm-carousel
  #carousel
  *ngIf="project"
  [(ngModel)]="index"
  [autoplay-speed]="speed"
  [autoplay]="autoplay"
  [infinite]="infinite"
  [between-delay]="betweenDelay"
  [data]="slides"
  [aniTime]="animationTime"
  [style]="styles"
  class="c-accent"
>
  <section ngx-hm-carousel-container class="content">
    <article
      class="item cursor-pointer"
      ngx-hm-carousel-item
      *ngFor="let slide of slides; let i = index"
    >
      <div>
        <ng-container *ngIf="i === 0">
          <div class="d-flex justify-content-between bg-light-green">
              <! -- Content -->
          </div>
        </ng-container>
        <ng-container *ngIf="i === 1">
          <div class="d-flex justify-content-between bg-light-yellow">
              <! -- Content -->
          </div>
        </ng-container>
      </div>
    </article>
    <ng-template #infiniteContainer></ng-template>
  </section>

  <ng-template #carouselContent let-slide let-i="index">
    <div>
      <ng-container *ngIf="i === 0">
        <div class="d-flex justify-content-between bg-light-green">
          <! -- Content -->
        </div>
      </ng-container>
      <ng-container *ngIf="i === 1">
        <div class="d-flex justify-content-between bg-light-yellow">
            <! -- Content -->
         </div>      
       </ng-container>
    </div>
  </ng-template>
  <ng-template #carouselDot let-model>
    <div
      class="ball bg-accent"
      [class.visible]="model.index === model.currentIndex"
    ></div>
  </ng-template>
</ngx-hm-carousel>

import { LanguageService } from '../../../../services/language.service';
import { Project } from '../../../../shared/brands.model';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent {

  @Input() project: Project;
  @Input() styles: string;

  slides = [0, 1];
  index = 0;
  speed = 4000;
  betweenDelay = 0;
  animationTime = 400;
  infinite = true;
  autoplay = true;

  constructor(private languageService: LanguageService) {
  }

  get currentLanguage() {
    return this.languageService.getUserUsedLanguage();
  }
}

few bugs i found using angular 7

• next and prev buttons should be outside of overflow:hidden (in some design, these buttons are not on top of the carousel carousel )
• same for dots, should be able to place them wherever i want
• with swipe it clicks on the link of the element i dragged (if it has (click) attribute or ), i should be able to disable link click on carousel swipe event change.
• on next, prev clicks there's no animation of sliding, i tried using css to animate the left attributes (transition: left .3s) which changes but it makes unwanted delay effect on swipe.
• on swipe stops at the last item at the right side of the page, using next you can go until the last item is on the right side of the page. should be always that the last item in the right side of the page. (as the swipe limit).

Support for Angular 13

Hi,
Can you please provide support for Angular V13? If I try to run the app facing the below warning:

ng serve

⠙ Generating browser application bundles (phase: setup)...Processing legacy "View Engine" libraries:

• ngx-hm-carousel [es2015/esm2015] (https://github.com/ZouYouShun/ngx-hm-carousel.git)
  Encourage the library authors to publish an Ivy distribution.

using with another that images, centent html with arrays

Hello,

I want touse your program to slides not image but content html create with the BDD.

I make a service to give datas. I want to call the servie to get result and inset into screen.

But for me it don't works in ngOnInit, for exemple :
this.dataSource = this.service.getAllLines();

I've got error in console that this.elem[index] undefined....

Thanks

angular 7 works but errors in console

Hello,

I have this :
<ngx-hm-carousel *ngIf="indicateurs" [(ngModel)]="currentIndex" (ngModelChange)="indexChanged($event)" [autoplay-speed]="10000" [between-delay]="1000" [autoplay]="true" [infinite]="infinite" [aniTime]="200" [disable-drag]="true" class="carousel c-accent"> .. </ngx-hm-carousel>

But the screen appear correctly but in console have :

ERROR TypeError: Cannot read property 'createEmbeddedView' of undefined at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.addInfiniteElm (ngx-hm-carousel.js:602) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.init (ngx-hm-carousel.js:561) at NgxHmCarouselComponent.push../node_modules/ngx-hm-carousel/fesm5/ngx-hm-carousel.js.NgxHmCarouselComponent.ngAfterViewInit (ngx-hm-carousel.js:483) at callProviderLifecycles (core.js:22317) at callElementProvidersLifecycles (core.js:22291) at callLifecycleHooksChildrenFirst (core.js:22281) at checkAndUpdateView (core.js:23217) at callViewAction (core.js:23449) at execEmbeddedViewsAction (core.js:23412) at checkAndUpdateView (core.js:23209)

Thanks

Support for Angular 9 SSR.

Hey.
Pure hammer js is causing the problems with window reference in the Angular SSR project. To solve that - it's needed to add https://www.npmjs.com/package/@egjs/hammerjs . But since we added that - ngx-hm-carousel is not working.

It's possible to switch from the hammer js library to egjs/hammerjs in hm-carousel?

Cheers!

#carouselNext and #carouselPrev do not have proper boundary check if infinite is false

Clicking on #carouselNext and #carouselPrev with infinite=false doesn't have a proper boundary check. You will end up sliding to negative or positive slides that do not exist instead of stopping at the lower/upper limits of the slideIndex.

option loop

It would be great if you have the loop option, so you do not see the jump at the end.

Documentation is incorrect for importing.

In your documentation it says:

import { HmCarouselModule } from 'ngx-hm-carousel';

@NgModule({
  imports: [
    HmCarouselModule
  ]
})
export class YourModule {}

But the actual module that gets exported from the node_modules is NgxHmCarouselModule

So the documentation should read

import { NgxHmCarouselModule } from 'ngx-hm-carousel';

@NgModule({
  imports: [
    NgxHmCarouselModule
  ]
})
export class YourModule {}