[Help]: How do I add navigation buttons?

[ItsTerm1n4l]

Summary

How do i add navigation buttons to the carousel?
Preferably in the form of a function eg:

  <button on:click={() => scrollTo("2")}>button</button>

to scroll to a image in the carousel.
also I would like to see a way to make it so that the button for the current image is styled differently to the others
I am using svelte
Thank you!

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

[davidjerleke]

Hi @ItsTerm1n4l,

Thanks for your question. Use the scrollTo method:

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

  let emblaApi
  let options = { loop: false }

  // Attach this where you want and pass an index
  function scrollTo(index) {
    emblaApi?.scrollTo(index)
  }

  function onInit(event) {
    emblaApi = event.detail
  }
</script>

<div
  class="embla"
  use:emblaCarouselSvelte="{{ options }}"
  on:emblaInit="{onInit}"
>
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>

Here’s a get started guide for the Svelte package.

And on a side note, you might want to vote here:

• [Poll]: Vote for features ✨ #770

[ItsTerm1n4l]

I figured out how to navigate through the carousel using the api like you have demonstrated here and now I just have to figure out how to highlight the button that corresponds to the currently displayed image.
Thank you!
My code (cleaned up):

let options = { loop: false}
let plugins = [Autoplay({ playOnInit: true, delay: 5000, stopOnInteraction: false,  })]
let emblaApi
function onInit(event) {
  emblaApi = event.detail
}
<div class="embla" use:emblaCarouselSvelte="{{ options, plugins }}" on:emblaInit="{onInit}">
  <div class="embla__container">
    {#each images as image}
        <div class="embla__slide"><img src={image.src} /></div>
    {/each}
   </div>
</div>
<div class="absolute right-1/2 text-xs bottom-0">
  {#each images as image}
    <button class="fa-solid fa-circle" on:click={() => emblaApi.scrollTo(image.index)}></button>
  {/each}
</div>

[davidjerleke]

@ItsTerm1n4l it's easy to track the selected index. Here's one way to solve it:

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

  let options = { loop: false }
  let plugins = [Autoplay({ playOnInit: true, delay: 5000, stopOnInteraction: false })]
  let selectedIndex = 0 // Selected index variable
  let emblaApi

  function onSelect(emblaApi) {
    selectedIndex = emblaApi.selectedScrollSnap()
  }

  function onInit(event) {
    emblaApi = event.detail
    
    // Update selected index when index changes
    emblaApi
      .on('select', onSelect)
      .on('reInit', onSelect)
  }
</script>

<div class="embla" use:emblaCarouselSvelte="{{ options, plugins }}" on:emblaInit="{onInit}">
  <div class="embla__container">
    {#each images as image}
        <div class="embla__slide"><img src={image.src} /></div>
    {/each}
   </div>
</div>

<div class="absolute right-1/2 text-xs bottom-0">
  {#each images as image}
    <button class="fa-solid fa-circle" on:click={() => emblaApi.scrollTo(image.index)}></button>
  {/each}
</div>

And then you can check this:

image.index === selectedIndex // If true this image should be styled differently

[ItsTerm1n4l]

Indeed. The problem I am having is once I have added a style to the corresponding button it stays applied and eventually they all look the same, I need a way of resetting/removing the styles for the buttons that are no longer selected so only the current one is different.
Awesome project BTW.

[ItsTerm1n4l]

I can clean up my code and paste the whole thing here next week if you want to take a look.

[davidjerleke]

I can clean up my code and paste the whole thing here next week if you want to take a look.

@ItsTerm1n4l it's much easier to collaborate if you create a CodeSandbox instead.