[Help]: Is there an action/store that I can use to track the duration of a slide with the AutoPlay Plugin?

[shyakadavis]

Summary

Hello, 👋

I know a thank-you isn't enough, but that you for the lib, nonetheless. Truly awesome.

After integrating the AutoPlay plugin in my SvelteKit app, there is a particular effect I was aiming for, whereby instead of just highlighting the current/selected index/dot, I wanted to display a pill/countdown/duration (don't know a good name for the effect) of that particular slide until the next one.

Here are reference photos of what I have(Figure 1) , and what I want to achieve(Figure 2)

Thank you for the consideration. 🙂

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[SergkeiM]

Hi @shyakadavis

I think you can achive this with CSS only:

Just change --delay to your delay in Embla

If delay is dynamic you can set it directly on the element: <div class="pills" style="--delay: ${MyDelayVar}s">

<div class="pills">
  <div class="pill">
    <div class="in active"></div>
  </div>
  <div class="pill">
    <div class="in"></div>
  </div>
  <div class="pill">
    <div class="in"></div>
  </div>
</div>

:root{
  --delay: 7s
}
.pills{
  display: flex;
}
.pill {
    border-radius: 6px;
    height: 10px;
    width: 30px;
    background-color: black;
    margin: 0 3px;
    overflow: hidden;
  
    .in.active {
        animation: fill var(--delay) linear 1;
        height: 100%;
        background-color: pink;
    }
}

@keyframes fill {
   0% {
     width: 0%;
   }
   100% {
     width: 100%;
   }
}

[shyakadavis]

Hey, @SergkeiM

Aahh, I see...

I was going to abstract away till I was left with only tailwind classes, but it became almost unreadable. I'm going to stick with a blend of both.

Thank you very much. 🙂

[davidjerleke]

@SergkeiM thanks a lot for the help 👍!

@shyakadavis additionally, you can fully control the autoplay state like this:

<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte'
  import Autoplay from 'embla-carousel-autoplay'

  let emblaApi
  let plugins = [Autoplay({ playOnInit: false })] // Don't start automatically to have full control: https://www.embla-carousel.com/plugins/autoplay/#playoninit
  let isPlaying = false // Use this state to toggle class names to control the timer animation

  function togglePlayingState(emblaApi, eventName) {
    isPlaying = eventName === 'autoplay:play' // Listen to plugin events: https://www.embla-carousel.com/api/plugins/#adding-event-listeners
  }

  function onInit(event) {
    emblaApi = event.detail
    emblaApi
      .on('autoplay:play', togglePlayingState) // https://www.embla-carousel.com/plugins/autoplay/#autoplayplay
      .on('autoplay:stop', togglePlayingState) // https://www.embla-carousel.com/plugins/autoplay/#autoplaystop
    
    emblaApi.plugins().autoplay.play() // Start manually so you have full control: https://www.embla-carousel.com/plugins/autoplay/#play
  }
</script>

<div
  class="embla"
  use:emblaCarouselSvelte="{{ plugins }}"
  on:emblaInit="{onInit}"
>
  ...
</div>

I hope my example and the relevant documentation links will help you to better understand how the Embla API works.

Best,
David