emiliano-bucci / react-spring-carousel Goto Github PK
View Code? Open in Web Editor NEWA new Carousel experience for the web.
Home Page: https://react-spring-carousel.emilianobucci.com
A new Carousel experience for the web.
Home Page: https://react-spring-carousel.emilianobucci.com
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!
Never seems to change.
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 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
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.
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;
}
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)`,
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
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?
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?
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?
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 ?
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?
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'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?
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.
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.