Carousel

The carousel component allows a series of content to cycle horizontally.

Carousel

Maven Central Class reference Source code

Default

Day Night
Carousel component Carousel component - dark mode

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a Carousel:


                                                
                                                import net.skyscanner.backpack.compose.carousel.BpkCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                // show carousel with image index 1
                                                val state = rememberBpkCarouselState(totalImages = totalImages)
                                                
                                                BpkCarousel(state){ index ->
                                                  Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
                                                }

Example of a image changed callback:


                                                
                                                import androidx.compose.runtime.LaunchedEffect
                                                import net.skyscanner.backpack.compose.carousel.BpkCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                val state = rememberBpkCarouselState(totalImages = totalImages)
                                                
                                                LaunchedEffect(state.currentPage) {
                                                  print("current page: ${state.currentPage}")
                                                }
                                                
                                                BpkCarousel(state) { index ->
                                                  Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
                                                }

Example of starting in a different image:


                                                
                                                import net.skyscanner.backpack.compose.carousel.BpkCarousel
                                                import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
                                                
                                                // show carousel with image index 1
                                                val state = rememberBpkCarouselState(totalImages = totalImages, currentImage = currentImage)
                                                
                                                BpkCarousel(state) { index ->
                                                  Image(painter = painterResource(id = imageResAtIndex(index)), contentDescription = "")
                                                }