[Feat]: ⭐ Roadmap

[davidjerleke]

⭐ Roadmap

embla-carousel

• SSR support.
• Remove the init event (deprecated).
• Rename snap methods/options for better naming consistency:

// Either:
const options = {
  startIndex: 2, // Remove
  startSnap: 2 // Change to
}

// Or:
emblaApi.selectedScrollSnap() --> emblaApi.selectedIndex()
emblaApi.previousScrollSnap() --> emblaApi.previousIndex()

• [Help]: Disable carousel navigation on tab #822 - Using event interceptors:

emblaApi.onIntercept('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
})

• Refactor plugin parameter from array [] to object {}. The plugin list can be a generic that extends the required plugin structure. This could dramatically improve typing because it can be inferred:

// Current
const emblaApi = EmblaCarousel(
  emblaNode, 
  { loop: true }, // Options
  [Autoplay()], // Plugins
);

// Proposal
const emblaApi = EmblaCarousel(
  emblaNode, 
  { loop: true }, // Options
  { autoplay: Autoplay() }, // Plugins
);

embla-carousel-autoplay

• Auto slide to reverse direction: [Feat]: Slide to reverse direction #821.

embla-carousel-class-names

• New option isPointerDown [Help]: Class `is-dragging` applied before dragging start #834 (reply in thread):

export const defaultOptions: OptionsType = {
  active: true,
  breakpoints: {},
  snapped: 'is-snapped',
  inView: 'is-in-view',
  pointerDown: 'is-pointer-down', // Applied while pointer is down on the carousel. (Previously is-dragging)
  dragging: 'is-dragging', // Applied while the carousel is being dragged. (New behaviour)
  draggable: 'is-draggable',
}

[sarussss]

Remove the init event (deprecated).

Hi @davidjerleke.
I'm really confused, when I read this because I'm using that event, if this event is removed, is there any other event that can do this? Is the removal of this event related to the development of SSR?

[davidjerleke]

@sarussss what Embla package are you using? No it’s not related to SSR.

[sarussss]

@davidjerleke i'm using Vanilla module package v8.0.1
Is this the event mentioned?

[davidjerleke]

Is this the event mentioned?

Yes it is.

@davidjerleke i'm using Vanilla module package v8.0.1

Allright. This is how you should do it instead:

import EmblaCarousel from 'embla-carousel'

function onInit(emblaApi) {
  /* Do something on init... */ 
}

const emblaNode = document.querySelector('.embla')
const emblaApi = EmblaCarousel(emblaNode, { loop: true })

onInit(emblaApi) // Embla is ready here
emblaApi.on('reInit', onInit)

[sarussss]

@davidjerleke Thank you.

[sarussss]

Hi @davidjerleke
What do you think if you add it to the roadmap?
I think the library would be even better if it could improve this problem.
#676