suhailsulu / react-carousel-3d Goto Github PK
View Code? Open in Web Editor NEW3D carousal component in react
3D carousal component in react
I have dynamic number of react elements in slides. Sometimes it happens there is only two elements. I would expect it will work with two elements but it displays only one.
Hi,
I get the below error when I use it in Next Js project
`ReferenceError: window is not defined`
at Object.<anonymous> (C:\Deba\Workspace2021\Nextjs\myportfolio\node_modules\3d-react-carousal\dist\index.js:1:255)
it disappears when i hit refresh
I need onChange event on Slide change ?
How can I change the arrow icon according to my needs? I have search and cannot find this solutions, is that possible?
Facing this issue while using this with react 17.0.2. When I tried to turn autoplay on it started glitching between 1st and second slide every half a sec.
Hi,
I just installed the plugin, setup the basic slides and the element.
When I run the application, it throws the error below (NextJS):
./node_modules/3d-react-carousal/src/index.js 180:4
Module parse failed: Unexpected token (180:4)
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
|
| return (
<div className="react-3d-carousel" style={{ height }} {...handlers}>
| {slides && slides.length > 0
| &&
Can you help me out?
Thanks!
Is this project could run in react native platform?
So I have a state contains array of objects which I pass to carousel. When the state changes, the carousel does not re-render.
Hello.
Is it possible to disable arrows in responsive mode ?
When the slider has two images then it does not work correctly. shows only one item. please check and fix it.
Can you please remove/comment out the console logs?
Probably would be nice to add support for navigating with the keyboard (left/right keys) or even tabbing into it to use the arrows, which doesn't seem to work for me in the demo.
When I use 3d-react-carousal in typescript + next js project, I faced this issue.
In the normal react project, this is working well.
ReferenceError: self is not defined
What is the solution?
Thank you
As we have in the topic => Is it possible to change the easily location and icon of the arrows?
Best!
Literacy: "carousal" should be "carousel".
Also, there's nothing 3D about it.
perhaps changing the package name to something typo-free and that describes the package better?
I really like the package but it's not working on typescript projects.
Thank you
when using in functional component reactjs showing this error !!
This is a really good library but it lacks this feature of going into a screen by passing its index into parameters
this dependency is working with react 17 and below but its not working with react 18
i tried following the solutions provided in https://stackoverflow.com/questions/41462729/typescript-react-could-not-find-a-declaration-file-for-module-react-material , but faced the same issue. Because of this , the carousel is not being displayed in my app.
Hi, i just tried your 3d carousel and works great on my nextjs page! its so beatiful.
I was wondering, if draggable option was on plan for future enhancements ?
If you could give me a clue about how can i implement this for myself, maybe i could help with it.
cheers!
The autoplay and set interval is not working in React JS and also I want to request for a new feature of making your arrows customizable so that we can use any icon there as well as pass in our stylings to it
I am trying to add interval to my carousel and getting error:
Uncaught TypeError: Cannot add property interval, object is not extensible
Currently, we have one active and 2 inactive slides can we make it to 5?
1 active and 4 inactive slides?
Hi , your package is perfect but I have a problem. When I want to change my state (any state) with setState the images hide from screen.
what is the problem ?
Think I have found a potential issue. When navigating quickly away from a page with the carousel I am sometimes getting the error Cannot read property 'clientHeight' of undefined
.
I believe this is because when the following check is being made document.getElementsByClassName("slider-single active").length > 0
, document.getElementsByClassName("slider-single active")[0].clientHeight
is then being accessed inside of a 500ms setTimeout function. This means that if the carousel is removed before 500ms then document.getElementsByClassName("slider-single active")[0]
does not exist?
Hello everyone, I'm using the carousel in my code and first of all it gives the
window not found error
So I resolved that by adding this snippet while importing from the code
let Carousel = null;
if (global.window) {
// eslint-disable-next-line global-require
Carousel = require('3d-react-carousel');
}
then it gives the following error :
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: null.
at invariant (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:58:15)
at ReactDOMServerRenderer.render (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3443:7)
at ReactDOMServerRenderer.read (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
at renderToString (C:\recro-website\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
at render (C:\recro-website\node_modules\next-server\dist\server\render.js:86:16)
at renderPage (C:\recro-website\node_modules\next-server\dist\server\render.js:211:20)
at Function.value (C:\recro-website\.next\server\static\development\pages\_document.js:914:41)
at _callee$ (C:\recro-website\.next\server\static\development\pages\_document.js:2293:77)
at tryCatch (C:\recro-website\node_modules\regenerator-runtime\runtime.js:62:40)
at Generator.invoke [as _invoke] (C:\recro-website\node_modules\regenerator-runtime\runtime.js:288:22)
at Generator.prototype.(anonymous function) [as next] (C:\recro-website\node_modules\regenerator-runtime\runtime.js:114:21)
at asyncGeneratorStep (C:\recro-website\.next\server\static\development\pages\_document.js:341:24)
at _next (C:\recro-website\.next\server\static\development\pages\_document.js:363:9)
at C:\recro-website\.next\server\static\development\pages\_document.js:370:7
at new Promise (<anonymous>)
at new F (C:\recro-website\node_modules\core-js\library\modules\_export.js:36:28)
so I don't know how to solve it I referred to this stackoverflow thread for that : https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string
Also I put a conditional over there to have it render anyway :
{Carousel ? <Carousel slides={slides} /> : null}
so now when I go and see it in browser console I couldn't find anything, if this library author is still updating please share some information on how to solve this one
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.