Breakpoints option

[davidjerleke]

Feature request is related to

• [x] embla-carousel (core package)

Is your feature request related to an issue?

• Users want to be able to set pass breakpoint options to Embla Carousel instead of writing this logic themselves.

Describe the solution you'd like

• When resizing the window or when re-initializing Embla, breakpoint options that match media will be applied:

// VanillaJS
const embla = EmblaCarusel(emblaNode, {
  loop: false,
  breakpoints: {
    '(min-width: 768px)': { loop: true }
  }
});

// ReactJS
const [emblaRef, emblaApi] = useEmblaCarousel({
  loop: false,
  breakpoints: {
    '(min-width: 768px)': { loop: true }
  }
});

• When breakpoint options clash, the last one on the list have precedence:

const embla = EmblaCarusel(emblaNode, {
  loop: false,
  breakpoints: {
    '(min-width: 768px)': { loop: true }, 
    '(min-width: 420px)': { loop: false } // This will override the (min-width: 768px) breakpoint loop option
  }
});

• If multiple queries match, they will be merged:

const embla = EmblaCarusel(emblaNode, {
  loop: false,  // --> 419px screens and down will produce the following outcome { loop: false }
  breakpoints: {
    '(min-width: 420px)': { align: 'start' },  // --> 420px screens and up will produce the following outcome { align: 'start', loop: false }
    '(min-width: 768px)': { loop: true },  // --> 768px screens and up will produce the following outcome { align: 'start', loop: true }
  }
});

• An active option will be introduced so users can activate/deactivate their carousels depending on different screen sizes:

const embla = EmblaCarusel(emblaNode, {
  active: true, // --> 767px screens and down will activate the carousel
  breakpoints: {
    '(min-width: 768px)': { active: false }, // --> 768px screens and up won't activate the carousel
  }
});

• Breakpoint and active options will work for plugins too.

[davidjerleke]

Released with v7.