Carousel

Default

Day	Night

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 = "")
                                                }