suhailsulu / react-carousel-3d Goto Github PK

So I have a state contains array of objects which I pass to carousel. When the state changes, the carousel does not re-render.

Is this project could run in react native platform?

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.

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?

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.

This is a really good library but it lacks this feature of going into a screen by passing its index into parameters

When the slider has two images then it does not work correctly. shows only one item. please check and fix it.

I am trying to add interval to my carousel and getting error:
Uncaught TypeError: Cannot add property interval, object is not extensible

How can I change the arrow icon according to my needs? I have search and cannot find this solutions, is that possible?

Can you please remove/comment out the console logs?

Currently, we have one active and 2 inactive slides can we make it to 5?
1 active and 4 inactive slides?

I need onChange event on Slide change ?

• I tried autoplay the way it is suggested but it doesn't work until and unless it is clicked and also slides between only 2 slides and doesn't move forward

I really like the package but it's not working on typescript projects.

Thank you

I found some errors during the build,
I using react 16.7.0

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

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
| &&

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.

it disappears when i hit refresh

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!

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

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.

Is it possible to disable arrows in responsive mode ?

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

when using in functional component reactjs showing this error !!

this dependency is working with react 17 and below but its not working with react 18

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)

As we have in the topic => Is it possible to change the easily location and icon of the arrows?

Best!

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.

https://jsfiddle.net/hvso78gp/