[Feat]: ⭐ Roadmap

[davidjerleke]

⭐ Roadmap

embla-carousel

• SSR support: [Feat]: SSR support #202.
• Add pointer move watcher.
• Remove the init event (deprecated).
• [Feat]: Refactor watch options to watch handlers #1078.
• [Feat]: Scroll to snap that holds a specific slide #1043.
• [Feat]: Scroll to snap that holds a specific slide #1043 Rename scrollTo --> scrollToSnap .
• [Feat]: Rename snap index options and methods to achieve consistent naming #1087.
• [Feat]: Add direction parameter to scrollToSnap & scrollToSlide #1091
• Refactor plugin parameter from array [] to object {}?

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

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

embla-carousel-autoplay

• [Feat]: Autoplay - Delay between transitions per slide #743.
• [Feat]: Autoplay - Possibility to create a progress bar #1059.
• [Feat]: Autoplay - Slide to reverse direction #821.
• [Feat]: Autoplay - Add pause autoplay method #1021.

embla-carousel-class-names

• [Feat]: ClassNames - Add possibility to pass an array of strings and add a loop option #1060.
• 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

• Rename the event to lowercase onemblaInit --> onemblainitt.

embla-carousel-docs

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

embla-carousel-data-attributes

• [Feat]: Add data attributes plugin #1051 (build a new plugin).

[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