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?

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

Hi!
Currently it's possible to slide slides one by one.
Can it be 2,3 or more slides per click.
Thank you!

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!

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

This is helpful expecially when you have more than one slide and you want to define some margin between them

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?

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.

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.

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.

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.

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

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.

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, 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?

Without having to send an index or an id to check, something like getActiveItem that returns an index or an id.

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.

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:

1. Build the lib the same way react-spring does, so we can internally rely on the right react-spring version;
2. Move 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.

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

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!

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.

How would I go about getting the current active item when using Jest for unit testing the carousel

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.