A lightweight carousel library with fluid motion and great swipe precision.
MIT License
Bot releases are hidden (Show)
Published by davidjerleke almost 3 years ago
true
--> false
dangerouslyGetEngine
--> internalEngine
%
to px
. A side effect of this will be that the position: relative
needed for loop carousels won't be necessary anymore.Embla Carousel is an open source MIT licensed project. If you are interested in supporting this project, please consider:
Published by davidjerleke about 3 years ago
Added the missing nodeAuthToken
to the .yarnrc
file.
Published by davidjerleke about 3 years ago
import useEmblaCarousel from 'embla-carousel-react'
import { useEmblaCarousel } from 'embla-carousel/react'
Published by davidjerleke over 3 years ago
This patch release fixes the broken type declarations for the useEmblaCarousel
hook that was introduced in v4.5.2.
Published by davidjerleke over 3 years ago
Published by davidjerleke over 3 years ago
🌟 Improvements
Solves issue #181 to some extent.
Published by davidjerleke over 3 years ago
Solves issue #38. With this release, it's possible to turn off the behavior where the carousel skips scroll snaps when it's dragged vigorously. This will be an opt-in option for now, but with the next major release (v.5), this will be the default behavior.
Read more here.
Published by davidjerleke over 3 years ago
Published by davidjerleke over 3 years ago
Solves issue #176. With this release, it's possible to scroll instantly to a scroll snap with the jump
parameter. It's a boolean
and default is false
. The following methods accept the jump
parameter:
embla.scrollTo(3) // Smooth scroll to scroll snap index 3
embla.scrollTo(3, true) // Instant jump to scroll snap index 3
embla.scrollPrev() // Smooth scroll to the previous scroll snap
embla.scrollPrev(true) // Instant jump to the previous scroll snap
embla.scrollNext() // Smooth scroll to the next scroll snap
embla.scrollNext(true) // Instant jump to the next scroll snap
This feature doesn't add anything to the bundle size.
Enjoy!
Published by davidjerleke over 3 years ago
Solves issue #170.
Published by davidjerleke over 3 years ago
Solves issue #164.
Published by davidjerleke over 3 years ago
Solves issue #156. With this release, it's possible to declare different options for different breakpoints. It's achieved by using the content
attribute of the pseudo element :before
on the root node:
.embla:before {
display: none;
content: '{
"slidesToScroll": 1,
"draggable": true
}';
}
@media (min-width: 768px) {
.embla:before {
content: '{
"slidesToScroll": 2,
"draggable": false
}';
}
}
Enjoy!
Published by davidjerleke over 3 years ago
Removes the transform rounding in the Translate
component.
Published by davidjerleke over 3 years ago
This is definitely one of the most exciting releases in a while. This release ships with awesome new features:
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.
For example, add spacing between your slides like so:
.embla__slide {
margin-right: 20px;
}
...or like so:
.embla__container {
grid-column-gap: 20px;
}
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()
.
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 */
This release makes the total bundle size 6% smaller 🎉 😍.
Enjoy!
David
Published by davidjerleke over 3 years ago
README links now point directly to useful documentation pages. For example Installation
--> Takes you to https://www.embla-carousel.com/get-started/#choose-installation-type.
Published by davidjerleke over 3 years ago
The new documentation website is up. Check it out here https://www.embla-carousel.com.
Published by davidjerleke almost 4 years ago
This release comes with a refactored eventEmitter
component that slightly reduces the bundle size.
Published by davidjerleke almost 4 years ago
ScrollBounds
component is now responsible for applying friction instead of the dragHandler
component when the carousel is out of bounds.Published by davidjerleke almost 4 years ago
Published by davidjerleke almost 4 years ago
This release comes with RTL (Right To Left) support (#43) for Embla. Special thanks to @omarkhatibco and @ppromerojr for all the help. And good news! This feature doesn't add any weight to the Embla library. It actually comes with a slightly reduced bundle size.
The options object is configured like so:
const emblaNode = document.getElementById('embla')
const options = { direction: 'rtl' } // Default is 'ltr'
const embla = EmblaCarousel(emblaNode, options)
The HTML direction also has to be set to RTL. This can be achieved by using the HTML dir attribute:
<div class="embla" id="embla" dir="rtl">
...
</div>
...or using the CSS direction property:
.embla {
direction: rtl;
}
I've added the following two sandboxes to the examples page to get you started:
Enjoy!