zouyoushun / ngx-hm-carousel Goto Github PK
View Code? Open in Web Editor NEWa light carousel for Angular13+, support mobile touch by hammerJs
Home Page: https://alanzouhome.firebaseapp.com/package/NgxHmCarousel
License: MIT License
a light carousel for Angular13+, support mobile touch by hammerJs
Home Page: https://alanzouhome.firebaseapp.com/package/NgxHmCarousel
License: MIT License
I was trying to make a roulette changing the speed input but I think it is constant when you setup it in the html
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.
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'.
Thanks
Is it possible to disable the drag event if the carousel contains only one image?
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
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
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
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;
}
}
}
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.
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
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
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...
Thanks,
Regards !
EDIT - I use the last version ;)
Next and PreviousButton is not showing if i follow the implementation of your demo.
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.
Hi, how i can remove slide dynamically.
Thanks in advance
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.
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.
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 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();
}
}
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:
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
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
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!
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.
It would be great if you have the loop option, so you do not see the jump at the end.
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 {}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.