Page indicator

The page indicator component is used to indicate a stack of pages or images in a group and highlight the current selected page or images.

Default

Storybook failed to load.

Over Image

Storybook failed to load.

With Nav

Storybook failed to load.

bpk-component-page-indicator

Backpack page indicator component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import BpkPageIndicator from '@skyscanner/backpack-web/bpk-component-page-indicator';
                                                
                                                export default () =>
                                                  <BpkPageIndicator
                                                    currentIndex={0}
                                                    totalIndicators={7}
                                                    onClick={(e, newIndex, direction) => {
                                                      console.log('Slide to new index:', newIndex);
                                                      console.log('Slide direction:', direction);
                                                    }}
                                                    indicatorLabel='Go to slide'
                                                    prevNavLabel='Previous slide'
                                                    nextNavLabel='Next slide'
                                                  />;

Props

Check out the full list of props on Skyscanner's design system documentation website.

Props

Storybook failed to load.