rcaferati/react-awesome-slider

Selected Screen

samuelsodhs opened this issue · 1 comments

samuelsodhs commented

Is there anyway to find which screen it is selected on? Sorry, I am new to this.

trolit commented

Hi. Simple way of finding selected screen could be by making use of onTransitionStart / onTransitionEnd component props. If we consider Autoplay slider

const AutoplaySlider = withAutoplay(AwesomeSlider);

<AutoplaySlider
                play={true}
                cancelOnInteraction={false} // should stop playing on user interaction
                interval={6000}
                cssModule={AwesomeSliderStyles}
              >

and add mentioned props

onTransitionStart={ e => { console.log(`Changing from: ${e.currentIndex}`); }}
onTransitionEnd={ e => { console.log(`Changed to: ${e.currentIndex}`); }}

We will have slide index logged to browser console. onTransitionStart replies current index just before transition and onTransitionEnd after slide change so you would get behaviour described below:

Changing from: 0
Changed to: 1
Changing from: 1
Changed to: 2

Besides currentIndex property u can access other interesting intel, here's quick look:
example