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.

Sign up for GitHub

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

Jump to bottom

After setting on pause and clicking on arrows navigation, the cycle restart Carousel #3188

Closed
liyokuna opened this issue May 13, 2019 · 2 comments · Fixed by #3225
Closed

After setting on pause and clicking on arrows navigation, the cycle restart Carousel #3188

liyokuna opened this issue May 13, 2019 · 2 comments · Fixed by #3225
Labels
component: carousel type: bug

Comments

@liyokuna
Copy link

liyokuna commented May 13, 2019 •
edited

Hello guys,

I created and defined a function to set on pause or play the carousel.
When setting on pause and clicking on one of the arrows navigation, the cycle restated by it own.

Link to minimally-working StackBlitz that reproduces the issue:

Here is a link to a demo, i fork one of your demo.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.0

ng-bootstrap: 4.1.2

Bootstrap: 4.2.3
@liyokuna liyokuna mentioned this issue May 13, 2019
Closed
@maxokorokov
Copy link
Member

Hmm, looks like it's actually is a bug...

Currently pressing keyboard ArrowRight/Left or clicking on the navigation arrows / indicators restarts the interval. We should probably set a paused flag internally when calling .pause() and reset it when calling .cycle()

Anyway the workaround for you would be to reset the interval to 0 → https://stackblitz.com/edit/angular-sgw6iw-dycapw?file=app/carousel-config.ts

@liyokuna liyokuna mentioned this issue May 14, 2019
Closed
@liyokuna
Copy link
Author

Thanks for the workaround :)

divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 7, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
6d94e09 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "pause" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
@divdavem divdavem mentioned this issue Jun 7, 2019
Merged
5 tasks
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 7, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
0a6dd45 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "pause" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 7, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
09f9eba 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "pause" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 7, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
3d234c3 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "pause" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 24, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
839cc5d 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 24, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
4521742 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 24, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
d061b0e 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 24, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
9bacd7c 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 24, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
4452f45 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jun 25, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
8a9e1bf 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jul 10, 2019
@divdavem
fix(carousel): stay paused after calling pause() until cycle() is called
beebdd3 
After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
divdavem added a commit to divdavem/ng-bootstrap that referenced this issue Jul 10, 2019
@divdavem
feat(carousel): stay paused after calling pause() until cycle() is ca…
f1a19f1 
…lled

After setting the carousel on pause through its pause() method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the cycle() method is needed to undo the effect of the pause()
method.
When pauseOnHover is true, hovering on the carousel no longer uses the
pause() and cycle() methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
The "paused" boolean status is now also included in the slide event.

Closes ng-bootstrap#3188
benouat pushed a commit that referenced this issue Jul 17, 2019
@divdavem
feat(carousel): stay paused after calling pause() until cycle() is ca…
2602154 
…lled (#3225)

After setting the carousel on pause through its `pause()` method and clicking
on navigation arrows, the carousel no longer automatically restarts.
Calling the `cycle()` method is needed to undo the effect of the `pause()`
method.
When `pauseOnHover` is true, hovering on the carousel no longer uses the
`pause()` and `cycle()` methods. The hover status is stored separately, so that
calling pause() and removing the mouse from the carousel no longer restarts
it automatically.

In order for the user to have more control, we also introduce:

+ The slide event now has a "source" property allowing to know what triggered
the event: "timer", "arrowLeft", "arrowRight" or "indicator".
+ The "paused" boolean status is now also included in the slide event.

Closes #3188
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: carousel type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(carousel): stay paused after calling pause() until cycle() is called divdavem/ng-bootstrap
3 participants
@benouat @maxokorokov @liyokuna