[Feat]: ⭐ Roadmap

[davidjerleke]

⭐ Roadmap

embla-carousel

• SSR support.
• Remove the init event (deprecated).
• Rename watchDrag to watchPointerDown.
• New watchPointerMove option - Ability to watch drag move like watchResize, watchFocus etc.
• [Feat]: Scroll to snap that holds a specific slide #1043.
• Rename scrollTo --> scrollToSnap (affected by [Feat]: Scroll to snap that holds a specific slide #1043).
• Rename snap methods/options for better naming consistency:

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

// Or:
emblaApi.selectedScrollSnap() --> emblaApi.selectedSnapIndex()
emblaApi.previousScrollSnap() --> emblaApi.previousSnapIndex()

• 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]: Autoplay - Slide to reverse direction #821.
• [Help]: Autoplay - Delay between transitions per slide #743
• [Feat]: Add pause autoplay method #1021
• Method to retrieve time left until next autoplay triggers.

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',
}

embla-carousel-svelte

• [Feat]: Make package available for svelte@next 5.0.0 #796
• Rename the event to lowercase onemblaInit --> onemblainitt.

embla-carousel-docs

• [Help]: Full-screen slides example #702

[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