A lightweight carousel library with fluid motion and great swipe precision.
MIT License
Bot releases are visible (Hide)
Published by davidjerleke about 4 years ago
Published by davidjerleke about 4 years ago
Comes with fixes for:
Published by davidjerleke about 4 years ago
Published by davidjerleke about 4 years ago
<EmblaCarouselReact>
, the useEmblaCarousel()
hook now exposes a ref
you can attach to your own component. The ref
approach makes the Embla footprint smaller regarding forcing stuff on the user. Basically, what the <EmblaCarouselReact>
component did was creating a React Element with the style { overflow: "hidden" }
. As a consequence, the user had to pass a string to choose DOM element type (div, ul, section etc...) and had to use the className prop in order to style the encapsulated element. This release solves issue #94.<EmblaCarouselReact>
returned null
before initializing the carousel. This release solves issue #91.useEmblaCarousel({ loop: false })
was before this release a one way ticket. Changing options didn't reinitialize the carousel with the new options. This has been fixed in this release.Migrating is luckily very easy.
import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'
const EmblaCarousel = () => {
const [EmblaCarouselReact, emblaApi] = useEmblaCarousel({ loop: false })
return (
<EmblaCarouselReact>
<div className="embla__container">
<div className="embla__slide">Slide 1</div>
<div className="embla__slide">Slide 2</div>
<div className="embla__slide">Slide 3</div>
</div>
</EmblaCarouselReact>
)
}
export default EmblaCarousel
import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'
const EmblaCarousel = () => {
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false })
return (
<div className="embla" ref={emblaRef}> /* Make sure this element has overflow: hidden; */
<div className="embla__container">
<div className="embla__slide">Slide 1</div>
<div className="embla__slide">Slide 2</div>
<div className="embla__slide">Slide 3</div>
</div>
</div>
)
}
export default EmblaCarousel
Enjoy!
Published by davidjerleke about 4 years ago
"sideEffects": false
in package.json
.Published by davidjerleke about 4 years ago
event.cancelable
and bails if it returns false
.Published by davidjerleke about 4 years ago
This release resolves issue #82. Special thanks to @sedlukha.
Published by davidjerleke about 4 years ago
Published by davidjerleke about 4 years ago
canScrollNext()
and canScrollPrev()
returned true
when loop: true
. This has been resolved.Published by davidjerleke about 4 years ago
This release resolves issue #78. Special thanks to @korsvanloon for opening this issue.
Published by davidjerleke over 4 years ago
This release resolves issue #77. Special thanks to @jamesdbruner for noticing this.
Published by davidjerleke over 4 years ago
This release resolves issue #75. Special thanks to @korsvanloon for opening this issue.
Published by davidjerleke over 4 years ago
The embla-carousel-react has now moved into the core package which will improve the maintainability of this project. For example, as soon as a new version is released, React users won't have to wait for the React package to be published separately.
Please migrate as soon as possible. Start by uninstalling the react package and installing the core package like so:
NPM
npm uninstall embla-carousel-react --save
npm install embla-carousel --save
YARN
yarn remove embla-carousel-react --save
yarn add embla-carousel --save
// from this...
import { useEmblaCarousel } from 'embla-carousel-react';
// ...to this
import { useEmblaCarousel } from 'embla-carousel/react';
useEmblaCarousel()
hook. The class setup is no longer supported. Please migrate to the hook setup as soon as possible.If you've starred the Embla Carousel React
package, please take a moment to migrate your star ⭐ to the core package as well. I would appreciate that a lot.
Thank you!
David
Published by davidjerleke over 4 years ago
Embla Carousel v.3 is here, and here's all you need to know before upgrading.
{ axis: 'x' | 'y' }
.loop: false
when content isn't enough for the loop effect to work.{ containScroll: '' | 'trimSnaps' | 'keepSnaps' }
.{ selectedClass: '' }
.{ draggableClass: '' }
.{ draggingClass: '' }
.{ inViewThreshold: 0.5 }
. Pass a number between 0 and 1 representing percentage of each slide size that needs to be visible in the carousel viewport in order to be considered in view. Ex: 0.5 = 50% of a slide needs to be in view.slidesInView()
- Get a list of slide indexes within the carousel viewport.slidesNotInView()
- Get a list of slide indexes not within the carousel viewport.dragStart
has been renamed to pointerDown
.dragEnd
has been renamed to pointerUp
.scrollBy()
has been removed.scrollToProgress()
has been removed.target : boolean
for the API method scrollProgress()
has been removed.containScroll
is now a string. An empty string equals the previous behavior when it was false
. The previous true
value is now named 'trimSnaps'
.changeOptions()
has been renamed to reInit()
.scrollSnapList()
now returns an array of numbers representing the scroll progress for each snap point. Indexes and slide nodes per snap point has been removed.Published by davidjerleke over 4 years ago
This release comes with more tools to manipulate the carousels scrollProgress
.
scrollProgress
It's now possible to get the scroll progress of either the carousels current scroll location or its target scroll location. Get the scroll progress of the carousels current scroll location:
embla.scrollProgress()
Get the scroll progress of the carousels target scroll location
const target = true
embla.scrollProgress(target)
scrollBy
It's now possible to pass a second boolean
parameter if you want the carousel to snap to the closest snap position. Passing true
will snap the carousel while false
will scroll by the exact given amount.
const snapToClosest = true
embla.scrollBy(0.2, snapToClosest)
scrollToProgress
As discussed in issue #26 this feature allows for setting the absolute scroll progress directly as compared to scrollBy
which adds to the current scroll progress. Like scrollBy
, it also accepts a second boolean
parameter if you want the carousel to snap to the closest snap position. Passing true
will snap the carousel while false
will scroll to the exact given progress.
const snapToClosest = true
embla.scrollToProgress(0.2, snapToClosest)
Thanks a bunch @xiel for this feature request.
Enjoy 🎉!
Published by davidjerleke over 4 years ago
The percent alignment
is a new feature. This feature was specified and requested in issue #49.
const options = { align: 0.2 }
const embla = EmblaCarousel(emblaNode, options)
This feature allows users to specify percentage alignment by passing a number, where a fraction like 0.2
represents 20% of the viewport size. Percentage will be measured from the start edge of the viewport.