🌟 New Features
This is definitely one of the most exciting releases in a while. This release ships with awesome new features:
Auto Spacing Detection
Embla will automatically detect any spacings between the slides whether it's margins or grid gaps, and automagically align the scroll snaps accordingly. This gives users a whole new level of freedom and convenience when setting up their carousels. This marks the beginning of Embla Carousel fully supporting any CSS that aligns your slides horizontally or vertically, whether it's CSS Grid, Flexbox or any other setup. This is more to the spirit of Embla Carousel which aims to have a minimal footprint.
Usage
For example, add spacing between your slides like so:
.embla__slide {
margin-right: 20px;
}...or like so:
.embla__container {
grid-column-gap: 20px;
}Root Node Method
Before this release, Embla exposed its container node and slide nodes with the embla.containerNode() and embla.slideNodes() methods. This release also exposes the rootNode with the following method embla.rootNode().
Usage
The root node is equivalent to the first argument you pass to the EmblaCarousel(rootNode: HTMLElement, option: EmblaOptions) initalizer. It's been added for convenience, in case you need to access that node in any context where you have access to the embla instance.
const embla = EmblaCarousel(emblaNode /* <--- this is equivalent to... */, options)
const rootNode = embla.rootNode() /* <--- ...this node */🛠️ Bugfixes
Last but not least
This release makes the total bundle size 6% smaller 🎉 😍.
Enjoy!
David