Current Item

[WassimHakim]

Why doesn't the current item have a custom class. if we can add it when navigating, how can we do that?

[sag1v]

You can do it by tracking the current active item yourself via the the change handlers, for example onNextEnd and onPrevEnd.
See the docs for more details.

here is a running example

Here is a sample gist:

const items = [1, 2, 3, 4, 5, 6, 7, 8];

function App() {
  const [currentItem, setCurrentItem] = React.useState(0);
  const onCurrentChange = current => {
    setCurrentItem(current.index)
  }

  return (
    <div className="App">
      <Carousel
        onNextEnd={onCurrentChange}
        onPrevEnd={onCurrentChange}
      >
        {items.map((item, i) => {
          const className = currentItem === i ? "active" : "";
          return (
            <Item key={item} className={className}>
              {item}
            </Item>
          );
        })}
      </Carousel>
    </div>
  );
}

I'm going to close this as its not a bug or a feature request, and i think you got an answer to your question.
If you think you didn't get a proper solution then feel free to re-open this issue. 🙂

[WassimHakim]

It worked thanks. One more question, how do we configure an infinite loop on it?

[sag1v]

Infinite loop is not supported yet see #9 , i didn't have much time to work on it. PR is welcome.