brainhubeu / react-carousel

A pure extendable React carousel, powered by Brainhub (craftsmen who ❤️ JS)
https://brainhub.eu/
MIT License
1.07k stars 165 forks source link

Multiple slide doesnt show #658

Closed hungdev closed 3 years ago

hungdev commented 3 years ago

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;
reco commented 3 years ago

@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

angelachan1997 commented 3 years ago

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!

hungdev commented 3 years ago

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

sinangurbuz commented 3 years ago

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

hungdev commented 3 years ago

@sinangurbuz you are right! thank you.