Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

few bugs i found using angular 7 #16

Open
harellevy opened this issue Jan 9, 2019 · 8 comments
Open

few bugs i found using angular 7 #16

harellevy opened this issue Jan 9, 2019 · 8 comments

Comments

@harellevy
Copy link

harellevy commented Jan 9, 2019

  • 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).
@ZouYouShun
Copy link
Owner

Hi, @harellevy , thinks for your correct.

about those problem,

  1. We can using the [(ngModel)] to set the button outside carousel.
  2. the dot is same logic about our carousel, but
  • but I thinks I will try to remove the overflow:hidde, and test the feasibility.
  1. 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

  2. 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

  3. I couldn't clearly your problem, can you get me some example code with stackbitz?

@ZouYouShun
Copy link
Owner

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.

@harellevy
Copy link
Author

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.

@harellevy
Copy link
Author

  1. after clicking next button till the end. i get this:

screen shot 2019-01-10 at 16 43 19

instead of this:

screen shot 2019-01-10 at 16 43 34

@ZouYouShun
Copy link
Owner

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.

@harellevy
Copy link
Author

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 )

@romikette
Copy link

romikette commented Mar 12, 2019

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;
}

@vandjoel
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants