brainhubeu / react-carousel

A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)

Home Page:https://brainhub.eu/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple slide doesnt show

hungdev opened this issue · comments

It only shows one slide.
here is my code

https://codesandbox.io/s/wonderful-thompson-jp3p1?file=/src/App.js:0-963

import React, { useState } from "react";
import "./styles.css";
import Carousel, {
  slidesToShowPlugin,
  slidesToScrollPlugin
} from "@brainhubeu/react-carousel";
import "@brainhubeu/react-carousel/lib/style.css";

const Item = ({ name }) => {
  return <div className="item">{name}</div>;
};
const MyCarouselWithDots = () => {
  const [value, setValue] = useState(0);

  const onChange = (value) => {
    setValue(value);
  };

  return (
    <Carousel
      plugins={[
        "centered",
        "infinite",
        "arrows",
        {
          resolve: slidesToShowPlugin,
          options: {
            numberOfSlides: 2
          }
        },
        {
          resolve: slidesToScrollPlugin,
          options: {
            numberOfSlides: 2
          }
        }
      ]}
    >
      {Array(7)
        .fill("")
        .map((e, i) => (
          <Item key={i} name={i + 1} />
        ))}
    </Carousel>
  );
};

export default MyCarouselWithDots;

@hungdev looks like when you install you get the 1.x brach. see the migration guide and make sure you use the old settings.
https://brainhubeu.github.io/react-carousel/docs/migrationGuide

Hi, I'm having the same issue and I'm not sure where should I refer to in the migration guide? I think the migration guide is talking about the code changes, while I use the new version of codes (with the plugins) and it's still not working. I also tried re-install the whole package, but it doesn't seem to work either.

Could you provide a clearer instruction? Thank you very much!

@reco i installed the latest version. Pls take a look my codesanbox

Hi @hungdev ,

In your package.json file
"@brainhubeu/react-carousel": "1.19.26"
When you use "npm i @brainhubeu/react-carousel" it will setup this version (1.19.26). But you must use v.2

Install it manually;
"@brainhubeu/react-carousel": "2.0.1"

It solved my issue.
Have a nice day

@sinangurbuz you are right!
thank you.