Great work! 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.

We're seeing the following error on Safari browsers when using React-spring-carousel.

Unexpected token ';'. Expected an opening '(' before a method's parameter list.

Safari 13.1.2 - 29%
Mobile Safari 12.1.2 - 16%
Safari 12.1.2 - 5%
Safari 13.1.3 - 5%
Other - 43%

We're using NextJs version 12.2.0 and React version 17.0.3.

I've tried version 2.0.19 and version 2.0.12 of React-spring-carousel, seeing the same issue on both.

Has anyone else run into something similar?

I've tried a number of things, like modifying the babelrc file to

  "presets": [
    "next/babel",
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

And updating our next config to include an exception for react-spring bundling

  webpack: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      use: ['babel-loader', 'source-map-loader'],
      exclude: '/node_modules/',
      include: '/node_modules/react-spring-carousel/',
    });

    return config;
  },

Any help would be greatly appreciated

Hey, I am trying to implement react-spring-carousel with storybook and running into following issue:

ERROR in ../node_modules/react-spring-carousel/dist/esm/index.js 1:1678
Module parse failed: Unexpected token (1:1678)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Any idea how to fix this one?
Thanks!

I'm using this library for my recent project and I'm very much liking the headless UI concept and the implementation style. Can you please add the typescript support in your roadmap?

To achieve more ambitious carousel initial layouts it's necessary to insert a dummy item and be able to size it.

This library forces all items to be the same width. Is there a way around that?

flex: `1 0 calc(100% / ${_itemsPerSlide} - ${
  (gutterRef.current * (_itemsPerSlide - 1)) / _itemsPerSlide
}px)`,

I want to create a responsive slider that changes the number of visible items based on screen dimensions.

Is there a way to reset the itemsPerSlide property ?

Hi there,

I really love this library, it can be fully customized as i desire

Just one thing i need for my project is withLoop: true i hope that i can use itemsPerSlide which less than the array length

For example, i want a slider with 3 items per slide with the same image (array.length = 1) like the image below

I tried to triplicate the array but it affects the thumbs

Hope we can have this feature, thank you!

I'm needing to perform a css scale transform on the div wrapping the carousel. The amount by which the the wrapper is scales changes when it's container is resized. When the wrapper is scaled, the amount by which each nav event causes the slides to travel is no longer consistent with their width.

I've tried changing the slide type to 'fluid' rather than 'fixed' and passing the new width of the slides after scaling as the slideAmount prop available to 'fluid' types, but the same problem persisted.

I also tried programmatically dispatching a window resize event whenever the scale amount changes after looking in your code to find a solution.

Am I doing something incorrect or is this a case that is not accounted for currently?

Never seems to change.

I have been trying to add some animations or styles to items based on getIsActiveItem. seems like this approach is not efficient, do you recommend a better way to do this work?

Thank you for developing this package, I really like the idea of a headless UI carousel and I'm trying to get it to work in my project.

When I attempt to install this package npm install react-spring-carousel with React 18, I see these errors:

npm WARN ERESOLVE overriding peer dependency
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

and when I do a fresh npm install of my repo I see these errors:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   47 more (@auth0/auth0-react, @emotion/react, @emotion/styled, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from [email protected]
npm WARN node_modules/react-zdog/node_modules/react-reconciler
npm WARN   react-reconciler@"^0.20.4" from [email protected]
npm WARN   node_modules/react-zdog
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.0.0" from [email protected]
npm WARN   node_modules/react-zdog/node_modules/react-reconciler
npm WARN     react-reconciler@"^0.20.4" from [email protected]
npm WARN     node_modules/react-zdog
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

If I had the bandwidth I would try to fix these errors myself, but I don't so I'm making this issue.

I get the following error when using nextjs 12.1.4 and react 18

.

This library doesn't seem to include cursor handling for "grab" and "grabbing" which is core to the UX. It's in the examples so I assumed it would be in there. For others, here's what you should add to your carousel...

.grabbable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.grabbable:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

You use inline styles for the thumbs module which makes changing the flex styling for thumbs impossible. Couldn't we put those styles into the class use-spring-carousel-thumbs-wrapper so they can be overridden?

Getting an NPM error when trying to install, looks like [email protected] requires react@^18.0.0. Does this package really require the new features provided by React v18? I'm of the understanding that React v18 is still in beta and not yet on a stable release.

I want to do some conditional styling of the thumbs, to make it clear which of the current slides is showing. Allowing a function ({activeItem}) => thumb element instead of just an element for renderThumb would enable this.

Is this something the project is interested in supporting?

I created a function that makes the carousel change items over time. So, I let it run for a while, and when I came back and clicked the button, it lost the reference... and returned undefined.

do you know what it can be?

I am using vite.js with react, in development is working fine, but after taking a build it, the JS bundle crashes
Error be like

index.a74ce657.js:32 TypeError: Cannot read properties of undefined (reading 'capture')

after removing that component that uses a this library, it works