ngx-hm-carousel
ngx-hm-carousel copied to clipboard
ZouYouShun
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).
Hi, @harellevy , thinks for your correct.
about those problem,
- We can using the [(ngModel)] to set the button outside carousel.
- the dot is same logic about our carousel, but
- but I thinks I will try to remove the
overflow:hidde, and test the feasibility.
-
current version can prevent the click event, you can see, If you still can't prevent that, maybe you should provide the simple code, let me find the problem https://stackblitz.com/edit/ngx-hm-carousel-custom
-
with .3s, we need set [aniTime]="300" and add the [aniClass]="customClass", more you can see https://stackblitz.com/edit/ngx-hm-carousel-seprate-transition-class
-
I couldn't clearly your problem, can you get me some example code with stackbitz?
In this version 1.6.0, I found some bug with the new feature, I will fix that maybe tomorrow, sorry about that, If you are imperative with this carousel, maybe you can clone that and solve that by yourself.
about 1,2 i recommend still using the overflow hidden but it should wrap the carousel items only and not the other controls (dots, next, prev, progress bar etc.), they all should be inside a div which has no position: relative, and no overflow:hidden, so they can be put wherever you want in the layout. i'll put an example of logical html, css structure. 3. i can still reproduce the click event on drag on your example, still not fixed. 4. Thanks, i'll try using the aniTime and see if this makes a difference. 5. the problem is that the arrows allow you to go right until the last item is at the beginning of screen and not end of it. I'll put some screenshots to make it clearer.
instead of this:
About 3. In fact, I had fix that problem in previous version, but it occur again, maybe some change caused this problem, I will check that. 5. I got that, I well fix that this weekend.
in infinite mode, goes next until infinity (css property left is only increasing even when there's no items more to show, no item is visible )
in infinite mode, goes next until infinity (css property left is only increasing even when there's no items more to show, no item is visible )
+1 i did this to get around edit: <ng-template #carouselPrev> <div class="click-area" *ngIf="currentIndex">
<ng-template #carouselNext> <div class="click-area" *ngIf="currentIndex !== carouselImages.length - showNum">
component.ts:
change(e) { this.currentIndex = e; }
in infinite mode, goes next until infinity (css property left is only increasing even when there's no items more to show, no item is visible )
+1
