Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Every single aspect of this carousel is buggy #723

Open
Maclay74 opened this issue Jun 14, 2021 · 4 comments
Open

Every single aspect of this carousel is buggy #723

Maclay74 opened this issue Jun 14, 2021 · 4 comments

Comments

@Maclay74
Copy link

They. Have. Tests.
But you know what's funny about tests? They should be properly written too.

Alright, I fixed the most obvious bug ever, can't imagine how they come so far with it.
Not going to do any helpful things for those, who created this, but for community.

First of all, you have to get rid of node-sass. It's deprecated and not going to work with Python39, but developers don't seem to care. Use dart-scss instead. Just replace node-sass with sass.

if you use slides.map just like any developer would display slides from database, you should fix src/tools/getChildren file.
Replace with

import React from "react";

const getChildren = (children, slides) => {
  if (!children) {
    if (slides) {
      return slides;
    }
    return [];
  }
  return React.Children.toArray(children);
};

export default getChildren;

I know what you think, but yea, they have [children] instead.

Then in main Carousel.js file instead of calling this every single render you should use state. Doesn't matter, recoil or useState from React.

And then drop this somewhere too

  useEffect(() => {
    setChildren(getChildren(props.children, props.slides));
  }, [props.children]);

When I fixed it, at first I thought that all my problems are solved, but how silly was I!
What made me think other things are written better?

I can't imagine that they did something more complex than examples in documentation, because nothing is working at all.

All I wanted is to have a carousel with items from database. I requests it, I pass it as a child.

<ReactCarousel {...settings}>
  {challenges.map((challenge) => (
      <Challenge challenge={challenge} key={challenge.id} />
  ))}
  <CreateChallenge />
</ReactCarousel>

So, settings. When I add infinite plugin, it just empty, doesn't show anything. Completely.
Other settings like fastSwipe, slidesToShowPlugin and so on make no difference.

When It loads, content is cut, I don't see more than on screen. If I resize window a bit, it appears, but I still can scroll it away from the screen.

ice_video_20210614-235927.mp4

I don't understand one thing. This library has a community, quite nice markup on github and they even asking for donations.
How do you use it? Why do you use it?

@AgainPsychoX
Copy link

I have recently so much issues with the library... Got back to some older project, after "updating" to v2 version everything is so buggy... New plugins system feel horrible IMO, and on top of that something deep down die every so often...

@vaporwavie
Copy link

It is truly tough to handle sometimes, and this is the most stable carousel project we have available nowadays, which makes the whole situation even worse. There are some major inconsistencies going on with this project and at times it seems that the maintainers don't even care about it anymore.

@jesper-nord
Copy link

I switched to Flicking instead, works a lot better and seems to be the most stable and mature out of the 10+ libraries I've evaluated.

@tp00012x
Copy link

tp00012x commented Dec 18, 2021

I agree this library is very buggy. Moving away... I had to mock this component as i was getting weird errors during my tests.
Is it possible to downvote a library?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants