[Poll]: Vote for features ✨

[davidjerleke]

1 SSR support

Support for configuring server side rendering for Embla.

---

2 More event watchers

More watcher options like watchFocus, similar to watchDrag, watchResize and watchSlides.

👉 Show me (click here)

const options = {
  watchFocus: true // enable Embla automatically scrolling to the slide that contains the element that received focus (default)
}

const options = {
  watchFocus: false // disable Embla automatically scrolling to the slide that contains the element that received focus
}

const options = {
  watchFocus: (emblaApi: EmblaCarouselType, entries: ResizeObserverEntry[]) => {
    // add your custom logic
    
    return false // If you want Embla to skip an automatic scroll to the slide that contains the element that received focus
    return true // If you want Embla to proceed with automatic scroll to the slide that contains the element that received focus
  }
}

Or:

// Only support for adding a callback ONCE here in contrast to emblaApi.on('focus', callback)
emblaApi.onWatch('focus', (emblaApi, eventName) => {
  // add your custom logic
    
  return false // If you want Embla to skip an automatic scroll to the slide that contains the element that received focus
  return true // If you want Embla to proceed with automatic scroll to the slide that contains the element that received focus
})

---

3 Fade plugin

• Tracked in this issue [Feat]: Add a fade plugin #39

---

4 More in-depth guides

• Rewrite of guides section with live examples.

---

5 Svelte examples

• Support for creating Svelte sandbox examples in the docs.

---

6 Vue examples

• Support for creating Vue sandbox examples in the docs.

---

7 Solid examples

• Support for creating Solid sandbox examples in the docs.

---

8 Multiple class names support for ClassNames plugin

Plugin page here.

👉 Show me (click here)

// current
const plugins = [ClassNames({
  inView: 'is-in-view'
})]

// proposed (with support alongside the above)
const plugins = [ClassNames({
  inView: ['is-in-view', 'additional-cool-class-name']
})]

---

[gnllucena]

I understand the hype behind SSR, but the lib already works on client side, I'd love to see more event watchers, and possible a way to disable slide transition on tab keystroke.

Thanks for the amazing work.

[meirroth]

@davidjerleke Embla seems to work fine with Nuxt SSR, so I'm wondering what's missing in terms of SSR? I understand that Embla initializes on client only but the carousel renders fine in SSR.

[davidjerleke]

@meirroth well, you can render your HTML and CSS on the server without any problems so it works in some sense I guess. But it won't:

• Set the correct scroll position on the server. For example, setting startIndex won't set the initial scroll position on the server. This will happen first when the client script mounts.
• Position slides that needs to shift position when loop: true. This will happen first when the client script mounts.

[meirroth]

@davidjerleke Got it. Thank you for clarifying.

[davidjerleke]

Important

• The fade plugin has been released so no need to vote for number 3 anymore.
• The multiple class names support for ClassNames plugin has been released so don’t vote for 8 anymore.

[KhaledGabr]

1 - SSR is much needed. The Cumulative layout shift is really noticeable. Especially with loop: true

[6mint]

My Priority would be SSR but I would be very happy about a guide on plugin development 🙂