Comments (10)
@abhilashsajeev @benbayard In ES6 Carousel.ControllerMixin
seems no more useful.
There even easier way to control your carousel (it was my need)
Just use
ref
to get access tobacking instance of Carousel
:
class myComponent extends Component {
// in render :
<Carousel
ref="carousel"
decorators={CarouselDecorator}>
....
// you control your Carousel without mixin
<button
className="btn btn-primary"
onClick={(e)=>this.handlesNext(e)}>
next
</button>
// your onclick
handlesNext(event) {
event.preventDefault();
// ref="carousel" so :
this.refs.carousel.nextSlide();
}
It works great with less code.
from nuka-carousel.
Well the Carousel.ControllerMixin was one of the important part when I am trying to call some this like this.state.carousels.carousel
anyway I have found a way to use it in ES6
class CarouselCmp extends React.Component {
constructor(props) {
super(props);
this.state = {
carousels : {}
}
this.setCarouselData = Carousel.ControllerMixin.setCarouselData;
}
}
from nuka-carousel.
Hey @abhilashsajeev I believe that Mixins are not support with es6 classes. If you would like to use Mixins with this component you have to use React.createClass
which has the same ES5 syntax.
from nuka-carousel.
^ true story
from nuka-carousel.
anyone tried it out using react-css-modules ?
from nuka-carousel.
Confirmed. it works perfect with react-css-modules.
from nuka-carousel.
@MacKentoch Thanks for the tip! Can you please show me your full code? Would particularly like to see your CarouselDecorator variable.
By doing it this way will the controls be within the actual Carousel div, or outside? I am asking mainly because of styling purposes (placing the controls relative to their parent container).
Thanks mate
from nuka-carousel.
@MacKentoch
Is it possible to get current slide info using this refs way?
from nuka-carousel.
@JulianJorgensen sorry it makes a while I don't use this library. I just used it for an office project.
@ragefuljoe you can access anything from ref.
As an example accessing all state is:
this.refs.carousel.state
So you can access slideIndex:
this.refs.carousel.state.slideIndex
from nuka-carousel.
<Carousel ref={(c) => this.slider = c }> {carouselItems} </Carousel>
Doing the above, not able to access this.slider.state.slideIndex
. Is usage different now with es6/dep of string refs?
from nuka-carousel.
Related Issues (20)
- react18
- Carousel slide transition bouncing while swiping when animation is set to zoom in iOS
- Hiding Next and Previous buttons when First or Last items are active HOT 2
- Are imperative api's such as `slideNext` and `slidePrev` available outside `Carousel` component? HOT 3
- Reset autoplay timer in onDragEnd?
- Can we achieve a crossfade effect between slides when animation="fade"? HOT 1
- add something like vertical mode feature to show items vertically?
- Better infinite scrolling behavior in a controlled carousel?
- Carousel does not work with varying width slides HOT 1
- Module not found: Can't resolve 'nuka-carousel' HOT 1
- Dynamically setting disabled state results in keyboard focus getting lost
- Test accessibility with jest-axe
- Direction of Carousel Sliding HOT 1
- [8.0.0] RangeError: invalid array length HOT 1
- totalPages does not work with image inside a div HOT 1
- Broken Documentation site (https://commerce.nearform.com/open-source/nuka-carousel) HOT 2
- Prop for animation speed HOT 2
- Map render a unique slide in the carousel
- Mobile (tested on IOS) Touch event captured and Slide direction
- Restore slidesToShow and related props HOT 2
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 nuka-carousel.