Skip to content

Commit

Permalink
feat: make sure autoplay stops on carousel interactions
Browse files Browse the repository at this point in the history
  • Loading branch information
eddieferrer committed Jan 9, 2025
1 parent ee93a71 commit a973201
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 2 deletions.
7 changes: 5 additions & 2 deletions @kiva/kv-components/utils/carousels.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
* @public This is a public method
*/
const goToSlide = (index) => {
/** Stop autoplay on go to slide interaction */
const autoplay = embla.value?.plugins()?.autoplay;
if (autoplay) {
autoplay.stop();
}
embla.value.scrollTo(index);
};

Expand Down Expand Up @@ -198,7 +203,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
});

embla?.value?.on('autoplay:play', () => {
console.log('autoplay:play');
/**
* Fires when autoplay starts
* @event autoplay-play
Expand All @@ -208,7 +212,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
});

embla?.value?.on('autoplay:stop', () => {
console.log('autoplay:stop');
/**
* Fires when autoplay starts
* @event autoplay-play
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ export const AutoPlayButton = () => ({
<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
<br/>
<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
<a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
</div>
`,
});
Expand Down

0 comments on commit a973201

Please sign in to comment.