Comments (3)
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. 🙂
from react-elastic-carousel.
It worked thanks. One more question, how do we configure an infinite loop on it?
from react-elastic-carousel.
Infinite loop is not supported yet see #9 , i didn't have much time to work on it. PR is welcome.
from react-elastic-carousel.
Related Issues (20)
- focusOnSelect conflict with enableMouseSwipe HOT 1
- Support with react 18 HOT 11
- Bug in importing {consts} in typescript HOT 6
- Unable to Copy Text in react-elastic-carosuel. HOT 1
- On page load if we have 4 items in carousel then items in carousel shifting to right end. HOT 1
- Wrong type for onChange of ReactElasticCarouselProps HOT 2
- Wrong type in RenderArrow prop document HOT 1
- Typescript Error, but Carousel is working on browser HOT 5
- `rec-slider` not resizing when window height changes HOT 2
- is there support for react 18? HOT 1
- Breakpoints not working properly HOT 2
- Unable to resolve dependency tree after React 18 update. HOT 1
- If enableAutoPlay is enabled then after last item it should move to first item HOT 1
- Buttons are not having discernible text. HOT 5
- Peer Dependency Issue with React 18
- Can you resolve peer dependency issue with react 18.There is ongoing project with react 18 so can you resolve the peer dependency with react 18. HOT 10
- Always show the three dots HOT 1
- the ReactElasticCarousel not have Children's props HOT 5
- Issues with peer dependencies
- React Elastic Carousel not installing.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-elastic-carousel.