Add slides & container options

[davidjerleke]

Feature request is related to

• embla-carousel (core package)

Is your feature request related to an issue?

• Allow to assign slide nodes as slots within a web component using shadow DOM #222
• Ignore <template> slide elements #73
• Option cellselector to filter slide #435

Describe the solution you'd like

• Enable users to provide either selectors for container and/or slides, or passing HTML elements directly. For example, in some cases, users might want to put elements inside the slide container that aren't slides, like template elements or similar. At the time of writing, this breaks the carousel.

Examples

// Selector approach

const emblaApi = EmblaCarousel(rootNode, {
  container: '.embla__container',
  slides: '.embla__slide',
});

...or

// HTML element approach

const emblaApi = EmblaCarousel(rootNode, {
  container: document.querySelector('.embla__container'),
  slides: document.querySelectorAll('.embla__slide'),
});

Types

type container = string | HTMLElement | null;
type slides = string | HTMLElement[] | NodeListOf<HTMLElement> | null;