emiliano-bucci / react-spring-carousel-js Goto Github PK
View Code? Open in Web Editor NEWA new Carousel experience for the modern Web
Home Page: https://react-spring-carousel-js.emilianobucci.com
A new Carousel experience for the modern Web
Home Page: https://react-spring-carousel-js.emilianobucci.com
Without having to send an index or an id to check, something like getActiveItem
that returns an index or an id.
Hello, let me begin with saying that I've researched a lot of carousel-libraries, and this seems to be one of, if not the greatest library I've come across, thank you for creating it!
In my project I try to showcase some images, the images will come from backend with some properties, in particular I have an orientation-prop that tells me whether or not the selected image is a landscape or a portrait image (landscape has higher width than height, and portrait has a lower width than height), and I'm struggling to find the right approach.
In the docs it says that the carousel will fill the wrapper-size, so my first thought was to change the wrapper width according to the active items orientation-prop, if it's a landscape-image I'll set the width to lets say 500px, and if it's a portrait image I'll set the width to lets say 200px. But to do this I need to get the active item, it seems less optimal to iterate over the items and use "getIsActiveItem" on each item, is there a way to get the current active item?
or is there a better approach to differently oriented images (or images of different heights/widths) that doesn't stretch out the portrait image, that I haven't thought of?
In any case, thank you for this amazing library
Regards, sashimigud
Love the carousel, great work! I am experiencing an issue withh getIsDragging()
. Initially, its value is false. I go to slide, it sets to true, however it does not reset to false. I see in the source code on line 136 of useSpringCarousel.tsx
it is setting to false but it is not reflected in my example. Here is my use case:
import PropTypes from 'prop-types'
import classNames from 'classnames'
import CardMedia from '../card-media/card-media.component'
import SliderDot from '../slider-dot/slider-dot.component'
import { useSpringCarousel } from 'react-spring-carousel-js'
import useStyles from './card-media-container.style'
const CardMediaContainer = (props) => {
const { media, className } = props
const [activeSlideIndex, setActiveSlideIndex] = useState(0)
const {
carouselFragment,
useListenToCustomEvent,
slideToItem,
getIsDragging,
} = useSpringCarousel({
initialActiveItem: 0,
items: media.map((item, i) => ({
id: i,
renderItem: (
<CardMedia
key={item.url}
isActive={activeSlideIndex === i}
// getIsDragging={() => getIsDragging()}
media={item}
/>
)
}))
})
const dragging = getIsDragging()
const classes = useStyles(props)
const getClasses = useMemo(() => {
const cardMediaContainerClasses = [classes.baseCardMediaSlider]
return classNames(cardMediaContainerClasses, { [className]: !!className })
}, [className, classes.baseCardMediaSlider])
const handleOnClick = (_, index) => slideToItem(index)
useListenToCustomEvent('onSlideStartChange', ({ nextItem }) => setActiveSlideIndex(nextItem))
if (!media) return
return (
<div className={getClasses}>
<div>{carouselFragment}</div>
<div className={classes.container}>
<div className={classes.dots}>
{media.length > 1 && media.map((_, i) => <SliderDot
key={i}
className={classes.dot}
index={i}
isActive={activeSlideIndex === i}
onClick={handleOnClick}
/>)}
</div>
</div>
</div>
)
}
CardMediaContainer.defaultProps = {
className: '',
media: []
}
CardMediaContainer.propTypes = {
className: PropTypes.string,
media: PropTypes.arrayOf(PropTypes.shape({}))
}
export default CardMediaContainer
This is helpful expecially when you have more than one slide and you want to define some margin between them
๐ Hello, I really need autoplay. As for me, this is the best carousel and it has everything I need, but the only thing is, tell me how to implement autoplay?
Hi!
Currently it's possible to slide slides one by one.
Can it be 2,3 or more slides per click.
Thank you!
I'm working on a carousel where every item has a lot of text and the user has to scroll down to read it. When the user swipes left or right to go to some other item, it doesn't scroll to the top.
Is there any way in which the next or previous slide always scrolls to the top?
PS: The items will be of variable lengths and I'm only targeting mobile devices.
For sites with RTL, the slider slides in the wrong direction (- instead of + in the calculation).
Would be good with a direction: 'ltr' | 'rtl'
prop.
How would I go about getting the current active item when using Jest for unit testing the carousel
For desktop screen, works fine but on mobile it doesn't scroll. I tested on Firefox, works fine, but for chrome on mobile screens doesn't. Does anybody else has the same issue?
Hey Emiliano, Thank you for this package - love how smooth it is. Wondering if you have solved this,
I have created a corousel with child elements wrapped in a link
like so:
items = [
<a href="/some-link" draggable={false}>
<Content />
</a>,
...
]
When drag is enabled, after dragging the elements onClick
handler is fired and redirects. Is there a way to stop this event from firing? I have tried pointer-events: none
but this also disables the ability to click on the link. Thank you
Situation: I have two custom carousel components that render on the same page. The components are completely independent and execute useSpringCarousel
separately. The second carousel further down the page leverages useListenToCustomEvent
to track when the onSlideStartChange
event fires so that it can change some state in its component.
Problem: When I use slideToPrevItem
or slideToNextItem
in the first component, it causes onSlideStartChange
to fire in the second component. I assume the event fires for any/all carousels. However, I did NOT expect this. I would expect the events to only fire for the respective components, NOT all components.
Hi, thanks for the library. I'm new in react-spring I search for spring carousel and meet your lib.
I want to animate each element inside each carousel item when it appears in the viewport is that possible? There is some example that I cant base on?
Hello!
First of all, thanks a lot for this awesome project! I used to work with other carousel components like react-slick and such but this one it simply the best anyone can use IMO.
I just have a single problem with the function 'slideToNextItem' that I use in a simple useEffect to automatically slide to the next item every X seconds.
It works fine when the tab is opened and focused, but as soon as I change tab and comes back I have the following error:
Do you have any idea what could cause this? As far as I understand, the issue comes from the getWrapperFromValue
function.
Thanks a lot!
Have you thought about adding a license to your library? something like MIT would be nice. Not having a declared license will stop a lot of people from using your library in their apps. Unless that's intentional, which is totally fine.
Hey Emiliano,
I can't see this from the current API - but is there a way to check if next or previous items exist? It would be useful in rendering the back and forward buttons if we had hasNext: boolean
or hasPrevious: boolean
which would allow us to conditionally render the buttons. Thank you
Hey,
first of all, thank you for your awesome library! I am planning to use it in my current Image Gallery Project inside of a custom Lightbox. I would like to build in a zoom-feature (double tap on pcs, pinch to zoom on mobile). I think that it would be useful to add the ability to disable the gesture handlers of this carousel (so it just displays the current image/slide), so that other gesture handlers like zoom can take over, until you zoom back to normal, in which case the carousel gesture handlers could be activated again.
So maybe a additional prop like disableGestures could be implemented.
Hi,
Following the examples from the documentation page I am having errors in components that are not being imported like CarouselItem, PlaygroundWrapper, ThumbItem and ThumbsWrapper.
I ran into some issue with the scrolling behaviour on touch devices and I couldn't figure out why it wasn't working until I went to the react-use-gesture
docs. They require that you specify the touch-action
css property on the draggable component (set it to none
) to avoid unexpected behaviour.
I think you should also specify that in the docs for react-spring-carousel-js
also, because it can easily throw users who aren't familiar with react-use-gesture
off.
Hi, I am having an issue where the slides move out of sync when toggling fullscreen mode. This happens when the carousel does not fill the window's width, e.g. it is within a fixed width container on the page and then when in fullscreen mode, it does fill the window width. My guess is because handleResize
does not proceed due to the window's width being the same as before? If I resize the window it obviously then all comes back in to sync with the correct slide selected.
Is there a way to force a resize when toggling fullscreen mode?
Hello!
I was playing with the differents options when I found this weird behaviour : When the option itemsPerSlide is the same as the length of the provided items, the loop doesn't work as expected.
You can see in the video that the bottom carousel - with a itemsPerSlide: 5 and items.length: 6 - works perfectly whereas the top one - with a itemsPerSlide: 5 and items.length 5 - doesn't.
I recreated this issue in a codesandbox here : https://codesandbox.io/s/epic-feistel-f5fgc
Again, thanks a lot for the work you put in this project, it is awesome!
Hello there,
The React Spring documentation specifies that it is a cross platform lib, and it gives us the option to install the right version for each project. By instance, I'm using it for web-only projects, so I've installed @react-spring/web
.
When I install your package, I receive a lot of warnings because you're using the entire react-spring
library:
Of course, they would not lead me into errors, but it would be nice to avoid it. I've two suggestions:
react-spring
does, so we can internally rely on the right react-spring
version;react-spring
to peer dependency on your package.json
, just like you do with React and React DOM.I think the second one is much simpler. Also, it is a basic scenario. I think most people that will use your package already has react-spring
as a dependency anyway.
Thanks for your awesome work.
Is there anyone that can give a working example of how to use the thumbsWrapperRef, I cant get it to work.
I want to style the container of the thumbnails a bit different.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.