Embla Carousel Current Slide / Total Slide Counter?

[gavink97]

Feature request is related to

• The Vanilla JavaScript version
• The React version
• The Embla Carousel core (all versions)
• Documentation website
• Other

Is your feature request related to an issue?

• A clear and concise description of what the problem is.

Describe the solution you'd like

A display showing the current slide / total slide below Embla carousel.

Describe alternatives you've considered

• A clear and concise description of alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[davidjerleke]

Hi Gavin (@gavink97),

Thank you for your question. You should display the following:

embla.selectedScrollSnap() + 1 / embla.scrollSnapList().length

The left number needs to be updated as the selected index changes (for example, if the user scrolls to a new slide). Embla will trigger the select event when the selected index changes so that’s when you should update the left number.

API reference:

• selectedScrollSnap
• scrollSnapList
• select event

This is how you listen to events:

const embla = EmblaCarousel(emblaNode)

embla.on('select', (eventName) => {
  console.log(`Embla just triggered ${eventName}!`)
})

Let me know if it helps.

Best,
David

[gavink97]

Hey David,

Thank you for the quick reply!

I got the counter working =) and am using document.createTextNode and appendChild methods to display it.

However, it continually creates new paragraph elements instead of updating 😅(I'm guessing there's a better method I could be using). Do you think I should use the settle event to have the counter update? or is this something we could have all within the select event listener?

I also noticed that it doesn't display until after the event has occurred.

<div id="slide-counter"></div>

embla.on('select', () => { const currentSlide = embla.selectedScrollSnap() + 1; const slidesCount = embla.scrollSnapList().length; let counter = document.getElementById("slide-counter"); let counterText = document.createElement('p'); counterText.appendChild(document.createTextNode(currentSlide + '/' + slidesCount)); counter.appendChild(counterText); })

[davidjerleke]

Hi Gavin,

I see. You should only update the text, not create a new node every time it changes. Something like this would do:

<div class="embla-counter">
  <span class="embla-counter__current">-</span>
  <span class="embla-counter__divider">/</span>
  <span class="embla-counter__total">-</span>
</div>

And updating this could be achieved like so:

// Pick up the elements
const emblaCounterCurrent = document.querySelector('.embla-counter__current')
const emblaCounterTotal = document.querySelector('.embla-counter__total')

// Set the total value
emblaCounterTotal.innerText = embla.scrollSnapList().length

// Update the counter
embla.on('select', () => {
  emblaCounterCurrent.innerText = embla.selectedScrollSnap() + 1
})

I also noticed that it doesn't display until after the event has occurred.

Yes, this is how it's intended to work. I would suggest staying with the select event. It's only possible for Embla to know its destination when you've triggered the scroll event, either by dragging the carousel or triggering scroll with buttons.

Let me know how it goes.

Best,
David

[gavink97]

Works perfectly!

Thank you David :)

[jordanlambrecht]

Hey @davidjerleke! How would you do this with the react version?

[davidjerleke]

Hi @jordanlambrecht,

Thanks for asking. There's not much of a difference. As demonstrated in the docs, it's possible to access the raw Embla API like this when using the React package. Using the API, you can create an index tracker the "React" way instead of the vanilla JavaScript example in this issue.

I’ve created a CodeSandbox for you that demonstrates one way to achieve this:

• Code view
• App view

Cheers,
David