search

rcaferati / react-awesome-slider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱
https://fullpage.caferati.me
MIT License
2.92k stars 294 forks source link

Selected Screen #185

Open samuelsodhs opened 3 years ago

samuelsodhs commented 3 years ago

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

trolit commented 3 years ago

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